Atualização do CSS
This commit is contained in:
189
referencia.md
Normal file
189
referencia.md
Normal file
@@ -0,0 +1,189 @@
|
||||
### 1. **Variáveis CSS (Cores, Sombra, etc.)**
|
||||
|
||||
As variáveis são essenciais para a consistência do design e permitem que você altere rapidamente o estilo de toda a aplicação ao modificar o valor das variáveis. Algumas variáveis importantes que podem ser reutilizadas são:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--azul-principal: #006494;
|
||||
--azul-escuro: #003554;
|
||||
--azul-claro: #0582ca;
|
||||
--azul-brilhante: #00a6fb;
|
||||
--amarelo: #ffb700;
|
||||
--cinza-claro: #f8f9fa;
|
||||
--cinza: #e9ecef;
|
||||
--preto: #212529;
|
||||
--branco: #ffffff;
|
||||
--sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--borda-radius: 8px;
|
||||
--transicao: all 0.3s ease;
|
||||
}
|
||||
```
|
||||
|
||||
Essas cores e efeitos podem ser reutilizados para manter o design consistente.
|
||||
|
||||
### 2. **Tipografia**
|
||||
|
||||
Fontes e tamanhos de texto podem ser extraídos e usados em outros projetos. Por exemplo:
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Você também tem diferentes tamanhos de fonte definidos nas regras de texto, como para o título de posts:
|
||||
|
||||
```css
|
||||
.post-title {
|
||||
font-size: 2.2rem;
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. **Layout Responsivo**
|
||||
|
||||
Esse código já tem um design responsivo com várias quebras de mídia. Você pode utilizar os padrões de grid e as regras de `@media` para garantir que seu projeto seja adaptável a diferentes tamanhos de tela. Um exemplo é o layout de grade no `.grid-layout`:
|
||||
|
||||
```css
|
||||
.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
E a adaptação responsiva para telas menores:
|
||||
|
||||
```css
|
||||
@media (max-width: 900px) {
|
||||
.grid-layout {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. **Estilos para Botões e Links**
|
||||
|
||||
Estilos para botões (`btn-primario`) e links (`.nav-principal a`, `.ver-tudo`) estão bem definidos e podem ser reutilizados:
|
||||
|
||||
```css
|
||||
.btn-primario {
|
||||
background: var(--branco);
|
||||
color: var(--azul-principal);
|
||||
padding: 12px 25px;
|
||||
border-radius: var(--borda-radius);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.nav-principal a:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
Esses estilos garantem que o comportamento dos links e botões seja consistente, com efeitos de transição.
|
||||
|
||||
### 5. **Efeitos de Sombra e Transição**
|
||||
|
||||
As sombras e transições são definidos com variáveis e podem ser facilmente reutilizados:
|
||||
|
||||
```css
|
||||
.sombra {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.sombra-hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. **Card Layouts (ex: Atalhos, Notícias)**
|
||||
|
||||
O estilo de cards, como no caso dos atalhos e das notícias, é bastante modular e pode ser reutilizado em diversos projetos. Por exemplo:
|
||||
|
||||
```css
|
||||
.atalho-card {
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
padding: 25px 15px;
|
||||
text-align: center;
|
||||
box-shadow: var(--sombra);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atalho-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 7. **Estilos de Ícones**
|
||||
|
||||
Estilos de ícones também são importantes, especialmente para se integrar com o Font Awesome:
|
||||
|
||||
```css
|
||||
.atalho-card i {
|
||||
font-size: 2rem;
|
||||
color: var(--azul-principal);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
```
|
||||
|
||||
### 8. **Componentes de Cabeçalho e Rodapé**
|
||||
|
||||
Esses componentes têm um estilo bem definido, com a possibilidade de facilmente aplicar em outros projetos:
|
||||
|
||||
```css
|
||||
.header-moderno {
|
||||
background: var(--branco);
|
||||
box-shadow: var(--sombra);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.footer-moderno {
|
||||
background: var(--azul-escuro);
|
||||
color: var(--branco);
|
||||
padding: 50px 0 20px;
|
||||
}
|
||||
```
|
||||
|
||||
### 9. **Animações**
|
||||
|
||||
As animações, como o efeito `fadeIn`, são reutilizáveis e podem ser aplicadas a outros elementos:
|
||||
|
||||
```css
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.noticia-card, .stats-card, .atalho-card {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Resumo:
|
||||
|
||||
Você pode reutilizar e adaptar os seguintes elementos para outros projetos:
|
||||
|
||||
1. **Cores e Variáveis CSS** (cores principais, bordas, transições)
|
||||
2. **Fontes e Tipografia** (fontes, tamanhos de texto)
|
||||
3. **Layouts Responsivos** (uso de `@media` e grids)
|
||||
4. **Botões e Links** (estilos interativos e transições)
|
||||
5. **Sombreamento e Transições** (efeitos de sombra, hover)
|
||||
6. **Card Layouts** (para atalhos, notícias, etc.)
|
||||
7. **Ícones** (estilo e cores dos ícones)
|
||||
8. **Componentes de Cabeçalho e Rodapé** (design de cabeçalhos fixos e rodapés)
|
||||
9. **Animações** (efeitos de entrada, transições animadas)
|
||||
|
||||
|
||||
411
style.css
411
style.css
@@ -12,33 +12,21 @@ Tags: notícias, corporativo, responsivo, moderno
|
||||
*/
|
||||
|
||||
/* Variáveis CSS atualizadas */
|
||||
/* Variáveis baseadas no referencia.md */
|
||||
:root {
|
||||
/* Sistema de cores renovado */
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1e40af;
|
||||
--primary-light: #93c5fd;
|
||||
--primary-extra-light: #eff6ff;
|
||||
--secondary: #475569;
|
||||
--secondary-dark: #334155;
|
||||
--accent: #f59e0b;
|
||||
--accent-dark: #d97706;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--info: #3b82f6;
|
||||
|
||||
/* Escala de cinza refinada */
|
||||
--white: #ffffff;
|
||||
--gray-50: #f8fafc;
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
--azul-principal: #006494;
|
||||
--azul-escuro: #003554;
|
||||
--azul-claro: #0582ca;
|
||||
--azul-brilhante: #00a6fb;
|
||||
--amarelo: #ffb700;
|
||||
--cinza-claro: #f8f9fa;
|
||||
--cinza: #e9ecef;
|
||||
--preto: #212529;
|
||||
--branco: #ffffff;
|
||||
--sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
--borda-radius: 8px;
|
||||
--transicao: all 0.3s ease;
|
||||
|
||||
/* Espaçamentos */
|
||||
--spacing-xs: 0.25rem;
|
||||
@@ -48,23 +36,11 @@ Tags: notícias, corporativo, responsivo, moderno
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
--spacing-3xl: 6rem;
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
|
||||
/* Sombras */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Transições */
|
||||
--transition-base: all 0.3s ease;
|
||||
--transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Mapeamento para nomes genéricos */
|
||||
--primary: var(--azul-principal);
|
||||
--primary-dark: var(--azul-escuro);
|
||||
--primary-light: var(--azul-claro);
|
||||
|
||||
/* Container */
|
||||
--container-width: 1280px;
|
||||
@@ -89,21 +65,21 @@ html {
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--gray-800);
|
||||
background-color: var(--gray-50);
|
||||
line-height: 1.6;
|
||||
color: var(--preto);
|
||||
background-color: var(--cinza-claro);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
transition: var(--transition-base);
|
||||
color: var(--azul-principal);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-dark);
|
||||
color: var(--azul-brilhante);
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -122,7 +98,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--gray-900);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -153,7 +129,7 @@ h6 {
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--gray-700);
|
||||
color: var(--preto);
|
||||
}
|
||||
|
||||
/* Container */
|
||||
@@ -169,12 +145,12 @@ p {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.875rem 1.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 25px;
|
||||
border-radius: var(--borda-radius);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
border: none;
|
||||
outline: none;
|
||||
gap: 0.5rem;
|
||||
@@ -182,42 +158,42 @@ p {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
background-color: var(--azul-principal);
|
||||
color: var(--branco);
|
||||
box-shadow: var(--sombra);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
color: var(--white);
|
||||
background-color: var(--azul-brilhante);
|
||||
color: var(--branco);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
background-color: var(--azul-escuro);
|
||||
color: var(--branco);
|
||||
box-shadow: var(--sombra);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--secondary-dark);
|
||||
color: var(--white);
|
||||
background-color: var(--azul-claro);
|
||||
color: var(--branco);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
background-color: var(--white);
|
||||
color: var(--primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
background-color: var(--branco);
|
||||
color: var(--azul-principal);
|
||||
box-shadow: var(--sombra);
|
||||
}
|
||||
|
||||
.btn-white:hover {
|
||||
background-color: var(--gray-50);
|
||||
color: var(--primary-dark);
|
||||
background-color: var(--cinza);
|
||||
color: var(--azul-brilhante);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
/* Seções */
|
||||
@@ -236,21 +212,21 @@ p {
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
background: linear-gradient(90deg, var(--azul-principal), var(--amarelo));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.site-header {
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--sombra);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
background: var(--white);
|
||||
background: var(--branco);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background-color: var(--gray-800);
|
||||
color: var(--gray-300);
|
||||
background-color: var(--azul-escuro);
|
||||
color: var(--cinza);
|
||||
padding: var(--spacing-sm) 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -269,15 +245,15 @@ p {
|
||||
}
|
||||
|
||||
.top-bar-contact a {
|
||||
color: var(--gray-300);
|
||||
color: var(--cinza);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.top-bar-contact a:hover {
|
||||
color: var(--white);
|
||||
color: var(--branco);
|
||||
}
|
||||
|
||||
.top-bar-social {
|
||||
@@ -286,12 +262,12 @@ p {
|
||||
}
|
||||
|
||||
.top-bar-social a {
|
||||
color: var(--gray-300);
|
||||
transition: var(--transition-base);
|
||||
color: var(--cinza);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.top-bar-social a:hover {
|
||||
color: var(--white);
|
||||
color: var(--branco);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@@ -323,7 +299,7 @@ p {
|
||||
.site-title {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--primary);
|
||||
color: var(--azul-principal);
|
||||
}
|
||||
|
||||
.site-title a {
|
||||
@@ -332,7 +308,7 @@ p {
|
||||
|
||||
.site-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
color: var(--preto);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -346,15 +322,15 @@ p {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--gray-700);
|
||||
color: var(--azul-escuro);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition-base);
|
||||
border-radius: var(--borda-radius);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--cinza);
|
||||
}
|
||||
|
||||
.primary-menu {
|
||||
@@ -363,19 +339,19 @@ p {
|
||||
}
|
||||
|
||||
.primary-menu a {
|
||||
color: var(--gray-700);
|
||||
color: var(--azul-escuro);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding: var(--spacing-xs) 0;
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.primary-menu a:hover {
|
||||
color: var(--primary);
|
||||
color: var(--azul-principal);
|
||||
}
|
||||
|
||||
.primary-menu .current-menu-item a {
|
||||
color: var(--primary);
|
||||
color: var(--azul-principal);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -386,14 +362,14 @@ p {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
background-color: var(--azul-brilhante);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
||||
color: var(--white);
|
||||
background: linear-gradient(135deg, var(--azul-principal) 0%, var(--azul-escuro) 100%);
|
||||
color: var(--branco);
|
||||
padding: var(--spacing-3xl) 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -421,13 +397,13 @@ p {
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
color: var(--white);
|
||||
color: var(--branco);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
color: var(--gray-100);
|
||||
color: var(--cinza);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -439,9 +415,9 @@ p {
|
||||
|
||||
/* Quick Access Buttons */
|
||||
.quick-access {
|
||||
background-color: var(--white);
|
||||
background-color: var(--branco);
|
||||
padding: var(--spacing-xl) 0;
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--sombra);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -457,18 +433,18 @@ p {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: var(--transition-base);
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
box-shadow: var(--sombra);
|
||||
transition: var(--transicao);
|
||||
text-align: center;
|
||||
border: 1px solid var(--gray-100);
|
||||
border: 1px solid var(--cinza);
|
||||
}
|
||||
|
||||
.quick-access-button:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: var(--sombra-hover);
|
||||
border-color: var(--azul-claro);
|
||||
}
|
||||
|
||||
.quick-access-icon {
|
||||
@@ -477,10 +453,10 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--primary-extra-light);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(0, 100, 148, 0.1);
|
||||
border-radius: var(--borda-radius);
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary);
|
||||
color: var(--azul-principal);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -488,11 +464,11 @@ p {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--gray-800);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
.quick-access-description {
|
||||
color: var(--gray-600);
|
||||
color: var(--preto);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -500,7 +476,7 @@ p {
|
||||
/* Featured News */
|
||||
.featured-news {
|
||||
padding: var(--spacing-3xl) 0;
|
||||
background-color: var(--gray-50);
|
||||
background-color: var(--cinza-claro);
|
||||
}
|
||||
|
||||
.featured-news-container {
|
||||
@@ -517,11 +493,11 @@ p {
|
||||
}
|
||||
|
||||
.featured-news-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: var(--transition-base);
|
||||
box-shadow: var(--sombra);
|
||||
transition: var(--transicao);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
@@ -529,7 +505,7 @@ p {
|
||||
|
||||
.featured-news-item:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
.featured-thumbnail {
|
||||
@@ -541,7 +517,7 @@ p {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.featured-news-item:hover .featured-thumbnail img {
|
||||
@@ -552,10 +528,10 @@ p {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
left: var(--spacing-md);
|
||||
background: var(--accent);
|
||||
color: var(--white);
|
||||
background: var(--amarelo);
|
||||
color: var(--azul-escuro);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: var(--borda-radius);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@@ -580,16 +556,16 @@ p {
|
||||
}
|
||||
|
||||
.featured-title a {
|
||||
color: var(--gray-900);
|
||||
transition: var(--transition-base);
|
||||
color: var(--azul-escuro);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.featured-title a:hover {
|
||||
color: var(--primary);
|
||||
color: var(--azul-brilhante);
|
||||
}
|
||||
|
||||
.featured-excerpt {
|
||||
color: var(--gray-600);
|
||||
color: var(--preto);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -609,33 +585,29 @@ p {
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--gray-200);
|
||||
transition: var(--transition-base);
|
||||
box-shadow: var(--sombra);
|
||||
border: 1px solid var(--cinza);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.sidebar-widget:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1.5rem;
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
color: var(--gray-800);
|
||||
border-bottom: 1px solid var(--cinza);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
/* Calendário Widget */
|
||||
.calendar-widget {
|
||||
background: linear-gradient(145deg, var(--white) 0%, var(--gray-50) 100%);
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--borda-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -650,17 +622,17 @@ p {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: var(--transition-base);
|
||||
border: 1px solid var(--gray-200);
|
||||
background: var(--cinza-claro);
|
||||
border-radius: var(--borda-radius);
|
||||
transition: var(--transicao);
|
||||
border: 1px solid var(--cinza);
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: var(--white);
|
||||
background: var(--branco);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: var(--sombra-hover);
|
||||
border-color: var(--azul-claro);
|
||||
}
|
||||
|
||||
.event-date {
|
||||
@@ -669,9 +641,9 @@ p {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
background: var(--primary-extra-light);
|
||||
color: var(--primary-dark);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(0, 100, 148, 0.1);
|
||||
color: var(--azul-escuro);
|
||||
border-radius: var(--borda-radius);
|
||||
padding: var(--spacing-sm);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -696,12 +668,12 @@ p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--gray-800);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600);
|
||||
color: var(--preto);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
@@ -710,7 +682,7 @@ p {
|
||||
/* Latest News */
|
||||
.latest-news {
|
||||
padding: var(--spacing-3xl) 0;
|
||||
background: var(--white);
|
||||
background: var(--branco);
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
@@ -721,19 +693,19 @@ p {
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-base);
|
||||
box-shadow: var(--sombra);
|
||||
transition: var(--transicao);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--gray-200);
|
||||
border: 1px solid var(--cinza);
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra-hover);
|
||||
}
|
||||
|
||||
.news-thumbnail {
|
||||
@@ -746,7 +718,7 @@ p {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.news-card:hover .news-thumbnail img {
|
||||
@@ -771,19 +743,19 @@ p {
|
||||
}
|
||||
|
||||
.news-title a {
|
||||
color: var(--gray-900);
|
||||
transition: var(--transition-base);
|
||||
color: var(--azul-escuro);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.news-title a:hover {
|
||||
color: var(--primary);
|
||||
color: var(--azul-brilhante);
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
color: var(--azul-claro);
|
||||
}
|
||||
|
||||
.news-meta span {
|
||||
@@ -792,13 +764,6 @@ p {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
color: var(--gray-600);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.news-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
@@ -809,10 +774,10 @@ p {
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background: var(--gray-900);
|
||||
color: var(--gray-400);
|
||||
background: var(--azul-escuro);
|
||||
color: var(--cinza);
|
||||
padding: var(--spacing-3xl) 0 var(--spacing-xl);
|
||||
margin-top: var(--spacing-3xl); /* Adiciona espaço acima do rodapé */
|
||||
margin-top: var(--spacing-3xl);
|
||||
}
|
||||
|
||||
.footer-widgets {
|
||||
@@ -828,7 +793,7 @@ p {
|
||||
}
|
||||
|
||||
.footer-widget-title {
|
||||
color: var(--white);
|
||||
color: var(--branco);
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
@@ -842,7 +807,7 @@ p {
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
background: var(--azul-brilhante);
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
@@ -852,15 +817,15 @@ p {
|
||||
}
|
||||
|
||||
.footer-menu a {
|
||||
color: var(--gray-400);
|
||||
transition: var(--transition-base);
|
||||
color: var(--cinza);
|
||||
transition: var(--transicao);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.footer-menu a:hover {
|
||||
color: var(--primary-light);
|
||||
color: var(--branco);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@@ -874,7 +839,7 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
color: var(--gray-400);
|
||||
color: var(--cinza);
|
||||
}
|
||||
|
||||
.footer-contact-icon {
|
||||
@@ -883,17 +848,17 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--gray-800);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--primary);
|
||||
background: var(--azul-principal);
|
||||
border-radius: var(--borda-radius);
|
||||
color: var(--branco);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--gray-800);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: var(--spacing-xl);
|
||||
text-align: center;
|
||||
color: var(--gray-500);
|
||||
color: var(--cinza);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -912,9 +877,9 @@ p {
|
||||
.post-content-area {
|
||||
max-width: 840px;
|
||||
margin: 0 auto var(--spacing-2xl) auto;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
box-shadow: var(--sombra);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -940,25 +905,25 @@ p {
|
||||
|
||||
.post-category {
|
||||
display: inline-block;
|
||||
background: var(--primary-extra-light);
|
||||
color: var(--primary);
|
||||
background: var(--azul-claro);
|
||||
color: var(--branco);
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.post-category:hover {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
background: var(--azul-brilhante);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 2.75rem;
|
||||
line-height: 1.2;
|
||||
color: var(--gray-900);
|
||||
color: var(--preto);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
@@ -967,7 +932,7 @@ p {
|
||||
justify-content: center;
|
||||
gap: var(--spacing-lg);
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-500);
|
||||
color: var(--azul-principal);
|
||||
}
|
||||
|
||||
.post-meta span {
|
||||
@@ -979,7 +944,7 @@ p {
|
||||
.entry-content {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: var(--gray-800);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
.entry-content p {
|
||||
@@ -993,7 +958,7 @@ p {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3;
|
||||
color: var(--gray-900);
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
|
||||
.entry-content ul,
|
||||
@@ -1007,18 +972,18 @@ p {
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
border-left: 4px solid var(--primary);
|
||||
border-left: 4px solid var(--azul-principal);
|
||||
padding-left: 1.5em;
|
||||
margin: 2em 0;
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
color: var(--gray-600);
|
||||
color: var(--preto);
|
||||
}
|
||||
|
||||
.entry-footer {
|
||||
margin-top: var(--spacing-2xl);
|
||||
padding-top: var(--spacing-lg);
|
||||
border-top: 1px solid var(--gray-200);
|
||||
padding-top: var(--spacing-xl);
|
||||
border-top: 1px solid var(--cinza-claro);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -1032,23 +997,23 @@ p {
|
||||
|
||||
.post-tags .tags-label {
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
color: var(--preto);
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.post-tags a {
|
||||
display: inline-block;
|
||||
background: var(--gray-100);
|
||||
color: var(--gray-700);
|
||||
background: var(--cinza-claro);
|
||||
color: var(--azul-principal);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--borda-radius);
|
||||
margin: 0.2rem;
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.post-tags a:hover {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
background: var(--azul-principal);
|
||||
color: var(--branco);
|
||||
}
|
||||
|
||||
.post-share {
|
||||
@@ -1059,7 +1024,7 @@ p {
|
||||
|
||||
.share-label {
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
color: var(--preto);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -1075,9 +1040,9 @@ p {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--white);
|
||||
color: var(--branco);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition-base);
|
||||
transition: var(--transicao);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1091,7 +1056,7 @@ p {
|
||||
.share-btn.twitter { background: #1DA1F2; }
|
||||
.share-btn.linkedin { background: #0A66C2; }
|
||||
.share-btn.whatsapp { background: #25D366; }
|
||||
.share-btn.print-btn { background: var(--secondary); }
|
||||
.share-btn.print-btn { background: var(--preto); }
|
||||
|
||||
/* Post Navigation */
|
||||
.post-navigation-container {
|
||||
@@ -1119,26 +1084,26 @@ p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-lg);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-base);
|
||||
border: 1px solid var(--cinza);
|
||||
border-radius: var(--borda-radius);
|
||||
background: var(--branco);
|
||||
box-shadow: var(--sombra);
|
||||
transition: var(--transicao);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-previous a:hover,
|
||||
.nav-next a:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--primary-light);
|
||||
color: var(--primary);
|
||||
box-shadow: var(--sombra-hover);
|
||||
border-color: var(--azul-claro);
|
||||
color: var(--azul-principal);
|
||||
}
|
||||
|
||||
.nav-subtitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--gray-500);
|
||||
color: var(--azul-principal);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1147,7 +1112,7 @@ p {
|
||||
|
||||
.nav-title {
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
color: var(--preto);
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@@ -1185,10 +1150,10 @@ p {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--white);
|
||||
background: var(--branco);
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--sombra);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user