- Menu de Navegação Principal
* Sticky: fica fixo no topo durante o scroll
* Positioned: z-index 1000 para ficar acima de outro conteúdo
* Efeito Glass: Com backdrop-filter blur(10px)
*/
.menu {
background-color: rgba(10, 10, 10, 0.95); /* Transparência 95% */
text-align: center;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: sticky; /* Fica fixo no topo */
top: 0; /* Distância do topo = 0 */
z-index: 1000; /* Fica acima de outros elementos */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Sombra elegante */
backdrop-filter: blur(10px); /* Efeito Glass morphism */
}
/**
* dentro de .menu - Links da Navegação
* Animação suave (transition: all 0.3s ease)
* Hover: cor vermelha com underline
*/
.menu a {
color: #ffffff;
text-decoration: none;
margin: 0 20px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease; /* Suaviza mudanças */
padding: 10px 0;
border-bottom: 2px solid transparent;
}
/**
* .menu a:hover - Estados ao passar mouse
* Cor muda para Ferrari Red (#e10600)
* Barra indicadora aparece na base (underline animado)
*/
.menu a:hover {
color: #e10600;
border-bottom: 2px solid #e10600;
}
/* ====================================================================
DIVISORES (
) ==================================================================== */ /** *
- Linhas divisoras decorativas * Gradiente que desaparece nas bordas * Usadas entre seções para separação visual */ hr { border: 0; /* Remove borda padrão */ height: 1px; background: linear-gradient(90deg, transparent, rgba(225, 6, 0, 0.5), transparent); margin: 40px auto; width: 60%; } /* ==================================================================== CONTAINER E LAYOUT (.container) ==================================================================== */ /** *
) ==================================================================== */ /** *
- Linhas divisoras decorativas * Gradiente que desaparece nas bordas * Usadas entre seções para separação visual */ hr { border: 0; /* Remove borda padrão */ height: 1px; background: linear-gradient(90deg, transparent, rgba(225, 6, 0, 0.5), transparent); margin: 40px auto; width: 60%; } /* ==================================================================== CONTAINER E LAYOUT (.container) ==================================================================== */ /** *
- Container Principal
* Limita largura máxima, centraliza e adiciona espaçamento
* Background semi-transparente com sombra interna (inset)
*/
.container {
width: 85%;
max-width: 1300px; /* Limite máximo */
margin: 50px auto; /* Centraliza */
background: rgba(15, 15, 15, 0.6); /* Fundo semi-transparente */
padding: 50px; /* Espaçamento interno */
border-radius: 1px;
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); /* Sombra interna */
}
/* ====================================================================
TABELAS - ESTRUTURA DE CARDS
==================================================================== */
/**
* - Tabelas genéricas
* Usadas como grid de cards (não para dados tabulares)
* Espaçamento separado (border-spacing: 20px)
*/
table {
width: 100%;
margin: 30px auto;
border-collapse: separate; /* Permite espaço entre células */
border-spacing: 20px; /* 20px de espaço entre TD */
}
/**
* - Tabela de Especificações
* Usada em páginas de detalhes de veículos
* Fundo escuro com sombra e borda sutil
*/
table.specs-table {
width: 70%;
margin: 40px auto;
background: #0d0d0d;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
border: 1px solid #1f1f1f;
}
/**
*
| - Células/Cards da Tabela * Cada célula é um "card" com estilos próprios * Transição suave ao passar o mouse (0.4s ease) */ td { background-color: #111111; border-radius: 12px; padding: 30px 20px; text-align: center; border: 1px solid #1a1a1a; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; vertical-align: top; } /** * | :hover - Estado hover dos cards * Transform: Move para cima (-8px) com efeito de elevação * Box-shadow: Sombra vermelha (glow effect) * Border: Cor vermelha escura */ td:hover { transform: translateY(-8px); /* Move 8px para cima */ box-shadow: 0 15px 40px rgba(225, 6, 0, 0.15); /* Sombra vermelha */ border-color: #3a0000; /* Borda vermelha escura */ } /** * dentro de | - Títulos dos cards
* Cor branca, maiúscula automática (text-transform)
*/
td b {
color: #ffffff;
font-size: 1.1rem;
display: block;
margin-bottom: 15px;
letter-spacing: 1px;
}
/**
* dentro de | - Descrições dos cards
*/
td p {
margin-bottom: 10px;
}
/* ====================================================================
IMAGENS
==================================================================== */
/**
* | :hover |