html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
font-family: 'Lato', sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #111111;
}
/* ===========================
HEADER
=========================== */
header{
width: 100%;
}
/* ===========================
BANNER
=========================== */
.banner{
background: linear-gradient(
135deg,
#111111,
#1b1b1b,
#111111
);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 20px;
border-bottom: 0;
}
/* Logo */
.banner img{
width: 220px;
height: auto;
margin-bottom: none;
transition: 0.3s;
}
/* Pequena animação */
.banner img:hover{
transform: scale(1.04);
}
/* Slogan */
.slogan{
color: #D4AF37;
font-size: 23px;
letter-spacing: 4px;
font-weight: bold;
text-align: center;
}
/* ===========================
MENU
=========================== */
nav{
background-color: #0f0f0f;
border-top: 2px solid #D4AF37;
border-bottom: 2px solid #D4AF37;
display: flex;
justify-content: center;
align-items: center;
gap: 45px;
padding: 18px 0;
}
nav a{
color: #D4AF37;
text-decoration: none;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
transition: .3s;
}
nav a:hover{
color: #FFD700;
transform: translateY(-2px);
}
/* ===================================
HERO
=================================== */
.hero {
background-color: #181818;
padding: 40px 0;
}
/* Área principal do carrossel */
.carousel {
width: 90%;
max-width: 1300px;
aspect-ratio: 16 / 9;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
background-color: #111111;
}
/* Cada banner do carrossel */
.slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition:
opacity 0.8s ease,
visibility 0.8s ease;
}
/* Banner atualmente visível */
.slide.ativo {
opacity: 1;
visibility: visible;
}
/* Imagem de cada banner */
.slide img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ===================================
BOTÕES ANTERIOR E PRÓXIMO
=================================== */
.botao-carousel {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border: 1px solid #D4AF37;
border-radius: 50%;
background-color: rgba(17, 17, 17, 0.75);
color: #D4AF37;
font-size: 25px;
cursor: pointer;
transition: 0.3s;
}
/* Posição do botão esquerdo */
.anterior {
left: 20px;
}
/* Posição do botão direito */
.proximo {
right: 20px;
}
/* Efeito ao passar o mouse */
.botao-carousel:hover {
background-color: #D4AF37;
color: #111111;
transform: translateY(-50%) scale(1.08);
}
/* ===================================
INDICADORES
=================================== */
.indicadores {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 12px;
}
/* Cada indicador */
.indicador {
width: 13px;
height: 13px;
padding: 0;
border: 1px solid #ffffff;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: 0.3s;
}
/* Indicador correspondente ao banner atual */
.indicador.ativo {
width: 30px;
border-radius: 10px;
border-color: #D4AF37;
background-color: #D4AF37;
}
/* Efeito ao passar o mouse */
.indicador:hover {
background-color: #FFD700;
}
/* ===================================
CATEGORIAS
=================================== */
.categorias {
background-color: #111111;
padding: 80px 5%;
}
.categorias-container {
max-width: 1300px;
margin: 0 auto;
}
.categorias h2 {
color: #D4AF37;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
.categorias-subtitulo {
color: #d8d8d8;
text-align: center;
font-size: 18px;
margin-bottom: 45px;
}
/* Grade dos cartões */
.categorias-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
/* Cada cartão */
.categoria-card {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 12px;
background-color: #1b1b1b;
border: 1px solid rgba(212, 175, 55, 0.25);
}
/* Imagem */
.categoria-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: 0.4s;
}
/* Área com nome e link */
.categoria-conteudo {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 20px;
z-index: 2;
}
/* Link */
.categoria-conteudo a {
display: inline-block;
padding: 9px 16px;
background-color: #d4af37;
color: #111;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: 0.3s;
}
/* Efeito ao passar o mouse */
.categoria-card:hover img {
transform: scale(1.06);
}
.categoria-conteudo a:hover {
background-color: #f1cc4f;
transform: translateY(-2px);
}
/* ===================================
PRODUTOS EM DESTAQUE
=================================== */
.produtos {
background-color: #181818;
padding: 80px 5%;
}
.produtos-container {
max-width: 1300px;
margin: 0 auto;
}
.produtos h2 {
color: #D4AF37;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
.produtos-subtitulo {
color: #d8d8d8;
text-align: center;
font-size: 18px;
margin-bottom: 45px;
}
/* Grade dos produtos */
.produtos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/* Card */
.produto-card {
background-color: #111111;
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 12px;
overflow: hidden;
transition: 0.3s;
}
/* Imagem */
.produto-card img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
/* Informações */
.produto-info {
padding: 22px;
}
.produto-info h3 {
color: #ffffff;
font-size: 20px;
margin-bottom: 12px;
}
/* Preço */
.produto-preco {
color: #D4AF37;
font-size: 21px;
font-weight: bold;
margin-bottom: 20px;
}
/* Botão */
.botao-produto {
display: inline-block;
width: 100%;
padding: 13px;
text-align: center;
background-color: #D4AF37;
color: #111111;
text-decoration: none;
font-weight: bold;
border-radius: 7px;
transition: 0.3s;
}
.botao-produto:hover {
background-color: #FFD700;
}
/* Efeito no card */
.produto-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}
/* ===================================
SOBRE
=================================== */
.sobre {
background-color: #111111;
padding: 80px 5%;
}
.sobre-container {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 70px;
align-items: center;
}
/* Texto */
.sobre-texto h2 {
color: #D4AF37;
font-size: 36px;
margin-bottom: 25px;
}
.sobre-texto p {
color: #d8d8d8;
font-size: 18px;
line-height: 1.8;
margin-bottom: 18px;
}
/* Destaques */
.sobre-destaques {
display: grid;
gap: 20px;
}
.destaque {
background-color: #181818;
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 10px;
padding: 25px;
transition: 0.3s;
}
.destaque span {
font-size: 30px;
}
.destaque h3 {
color: #D4AF37;
font-size: 21px;
margin: 10px 0 6px;
}
.destaque p {
color: #f5f5f5;
font-size: 16px;
}
.destaque:hover {
transform: translateX(6px);
border-color: #D4AF37;
}
/* ===================================
CONTATO E LOCALIZAÇÃO
=================================== */
.contato {
background-color: #181818;
padding: 80px 5%;
}
.contato-container {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.contato-info h2 {
color: #D4AF37;
font-size: 36px;
margin-bottom: 20px;
}
.contato-info > p {
color: #d8d8d8;
font-size: 18px;
line-height: 1.7;
margin-bottom: 30px;
}
.contato-item {
margin-bottom: 25px;
}
.contato-item h3 {
color: #D4AF37;
font-size: 20px;
margin-bottom: 8px;
}
.contato-item p {
color: #f5f5f5;
font-size: 17px;
line-height: 1.6;
}
/* ===========================
CARDS DE CONTATO
=========================== */
.contato-card {
width: 100%;
max-width: 520px;
background-color: #111111;
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 10px;
padding: 22px 25px;
margin: 0 auto 20px;
transition: 0.3s ease;
}
/* Parte superior */
.contato-card-topo {
display: grid;
grid-template-columns: 45px 1fr 45px;
align-items: center;
margin-bottom: 18px;
}
.contato-card-topo > div:nth-child(2) {
text-align: center;
}
/* Área do ícone */
.contato-icone {
width: 45px;
height: 45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Logo */
.contato-icone i {
font-size: 32px;
color: #D4AF37;
}
/* Ícone de localização */
.contato-localizacao {
border: 1px solid #D4AF37;
border-radius: 50%;
color: #D4AF37;
font-size: 24px;
}
/* Título */
.contato-card h3 {
color: #D4AF37;
font-size: 19px;
margin: 0 0 5px;
}
/* Descrição */
.contato-card-topo p {
color: #a8a8a8;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Endereço */
.contato-endereco {
color: #f5f5f5;
font-size: 15px;
line-height: 1.6;
padding: 15px 0;
border-top: 1px solid rgba(212, 175, 55, 0.15);
}
/* Links */
.contato-card .contato-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-top: 15px;
border-top: 1px solid rgba(212, 175, 55, 0.15);
color: #f5f5f5;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: 0.3s ease;
}
/* Seta */
.contato-card .contato-link span {
color: #D4AF37;
font-size: 20px;
transition: 0.3s ease;
}
/* Efeito do card */
.contato-card:hover {
border-color: rgba(212, 175, 55, 0.65);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Efeito do link */
.contato-card:hover .contato-link {
color: #D4AF37;
}
/* Movimento da seta */
.contato-card:hover .contato-link span {
transform: translateX(5px);
}
/* ===================================
MAPA
=================================== */
.mapa {
width: 100%;
max-width: 700px;
margin: 40px auto 0;
border: 1px solid #D4AF37;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.mapa iframe {
width: 100%;
height: 365px;
border: none;
border-radius: 10px;
display: block;
pointer-events: none;
}
.mapa-link {
position: absolute;
inset: 0;
z-index: 2;
display: block;
}
/* ===================================
RODAPÉ
=================================== */
.rodape {
background-color: #0b0b0b;
border-top: 1px solid #D4AF37;
padding: 60px 5% 25px;
}
.rodape-container {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 60px;
}
/* Logo */
.rodape-marca img {
width: 180px;
height: auto;
margin-bottom: 15px;
}
.rodape-marca p {
color: #d8d8d8;
font-size: 16px;
}
/* Títulos */
.rodape h3 {
color: #D4AF37;
font-size: 20px;
margin-bottom: 18px;
}
/* Links */
.rodape-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.rodape a {
color: #d8d8d8;
text-decoration: none;
font-size: 16px;
transition: 0.3s;
}
.rodape a:hover {
color: #FFD700;
}
/* Contato */
.rodape-contato {
display: flex;
flex-direction: column;
gap: 10px;
}
.rodape-contato p {
color: #d8d8d8;
line-height: 1.6;
}
/* Parte inferior */
.rodape-final {
max-width: 1300px;
margin: 45px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(212, 175, 55, 0.25);
display: flex;
justify-content: space-between;
gap: 20px;
}
.rodape-final p {
color: #888888;
font-size: 14px;
}
/* ===========================
MENU MOBILE
=========================== */
.menu-mobile {
display: none;
}
/* ===================================
RESPONSIVIDADE - HEADER
=================================== */
@media (max-width: 768px) {
/* ===========================
BANNER
=========================== */
.banner {
padding: 15px 10px;
}
.banner img {
width: 220px;
}
.slogan {
font-size: 16px;
letter-spacing: 2px;
margin-top: 5px;
}
/* ===========================
MENU MOBILE
=========================== */
.menu-desktop {
display: none;
}
.menu-mobile {
display: block;
background-color: #0f0f0f;
border-top: 2px solid #D4AF37;
border-bottom: 2px solid #D4AF37;
}
/* Botão Menu */
.menu-mobile summary {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: #D4AF37;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
padding: 15px;
cursor: pointer;
list-style: none;
user-select: none;
}
/* Remove a seta padrão do details */
.menu-mobile summary::-webkit-details-marker {
display: none;
}
/* Ícone */
.menu-mobile summary span {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
}
/* Rotação do ícone quando aberto */
.menu-mobile[open] summary span {
transform: rotate(90deg);
}
/* Área dos links */
.menu-links {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
border-top: 1px solid rgba(212, 175, 55, 0.35);
}
/* Links */
.menu-links a {
width: 100%;
box-sizing: border-box;
padding: 13px 0;
color: #D4AF37;
text-decoration: none;
text-align: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(212, 175, 55, 0.20);
opacity: 0;
transform: translateY(-8px);
}
.menu-links a:last-child {
border-bottom: none;
}
.menu-mobile.animando .menu-links a {
animation: menuEntrada 0.35s ease forwards;
}
.menu-mobile.animando .menu-links a:nth-child(1) {
animation-delay: 0.03s;
}
.menu-mobile.animando .menu-links a:nth-child(2) {
animation-delay: 0.07s;
}
.menu-mobile.animando .menu-links a:nth-child(3) {
animation-delay: 0.11s;
}
.menu-mobile.animando .menu-links a:nth-child(4) {
animation-delay: 0.15s;
}
.menu-mobile.animando .menu-links a:nth-child(5) {
animation-delay: 0.19s;
}
/* Animação */
@keyframes menuEntrada {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Efeito ao tocar */
.menu-links a:active {
background-color: #1b1b1b;
}
}
/* ===================================
RESPONSIVIDADE - CARROSSEL
=================================== */
@media (max-width: 768px) {
.hero {
padding: 20px 0;
}
.carousel {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
}
.botao-carousel {
width: 38px;
height: 38px;
font-size: 20px;
background-color: transparent;
}
.anterior {
left: 10px;
}
.proximo {
right: 10px;
}
.indicadores {
bottom: 10px;
gap: 8px;
}
.indicador {
width: 10px;
height: 10px;
}
.indicador.ativo {
width: 24px;
}
}
/* ===================================
RESPONSIVIDADE - CATEGORIAS
=================================== */
@media (max-width: 768px) {
.categorias {
padding: 60px 4%;
}
.categorias h2 {
font-size: 30px;
}
.categorias-subtitulo {
font-size: 16px;
margin-bottom: 30px;
}
.categorias-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.categoria-conteudo {
padding: 12px;
}
.categoria-conteudo a {
font-size: 11px;
padding: 6px 10px;
border-radius: 4px;
}
.modal-conteudo {
padding: 30px 20px;
}
.modal-conteudo h2 {
font-size: 1.25rem;
}
.modal-conteudo > p {
font-size: 0.85rem;
}
.modelo-opcao {
padding: 13px 15px;
font-size: 0.9rem;
}
}
@media (max-width: 400px) {
.categorias-grid {
grid-template-columns: 1fr;
}
}
/* =========================================
RESPONSIVIDADE - PRODUTOS EM DESTAQUE
========================================= */
@media (max-width: 768px) {
.produtos {
padding: 60px 15px;
}
.produtos-container {
width: 100%;
}
.produtos h2 {
font-size: 2rem;
text-align: center;
}
.produtos-subtitulo {
font-size: 0.95rem;
text-align: center;
margin-bottom: 30px;
}
.produtos-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.produto-card {
width: 100%;
}
.produto-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.produto-info {
padding: 15px 10px;
}
.produto-info h3 {
font-size: 1rem;
}
.produto-preco {
font-size: 1rem;
}
.botao-produto {
font-size: 0.8rem;
padding: 9px 10px;
}
}
/* =========================================
CELULARES PEQUENOS
========================================= */
@media (max-width: 400px) {
.produtos {
padding: 50px 10px;
}
.produtos h2 {
font-size: 1.7rem;
}
.produtos-subtitulo {
font-size: 0.85rem;
padding: 0 10px;
}
.produtos-grid {
gap: 10px;
}
.produto-card img {
height: 190px;
}
.produto-info {
padding: 12px 8px;
}
.produto-info h3 {
font-size: 0.9rem;
}
.produto-preco {
font-size: 0.9rem;
}
.botao-produto {
display: block;
width: 100%;
text-align: center;
font-size: 0.72rem;
padding: 8px 5px;
}
}
/* =========================================
RESPONSIVIDADE - SEÇÃO SOBRE
========================================= */
@media (max-width: 768px) {
.sobre {
padding: 60px 15px;
}
.sobre-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
.sobre-texto {
width: 100%;
text-align: center;
}
.sobre-texto h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.sobre-texto p {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 15px;
}
.sobre-destaques {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.destaque {
padding: 20px 10px;
text-align: center;
}
.destaque span {
font-size: 1.8rem;
}
.destaque h3 {
font-size: 1rem;
margin: 10px 0 6px;
}
.destaque p {
font-size: 0.8rem;
line-height: 1.4;
}
}
/* =========================================
CELULARES PEQUENOS
========================================= */
@media (max-width: 400px) {
.sobre {
padding: 50px 12px;
}
.sobre-container {
gap: 30px;
}
.sobre-texto h2 {
font-size: 1.7rem;
}
.sobre-texto p {
font-size: 0.88rem;
line-height: 1.6;
}
.sobre-destaques {
grid-template-columns: 1fr;
gap: 12px;
}
.destaque {
padding: 18px 12px;
}
.destaque span {
font-size: 1.6rem;
}
.destaque h3 {
font-size: 0.95rem;
}
.destaque p {
font-size: 0.8rem;
}
}
/* =========================================
RESPONSIVIDADE - SEÇÃO CONTATO
========================================= */
@media (max-width: 768px) {
.contato {
padding: 60px 15px;
}
.contato-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
.contato-info {
width: 100%;
text-align: center;
}
.contato-info h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.contato-info > p {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 30px;
}
.contato-item {
margin-bottom: 25px;
}
.contato-item h3 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.contato-item p {
font-size: 0.9rem;
line-height: 1.6;
}
.contato-card {
padding: 18px;
}
.contato-card h3 {
font-size: 1rem;
}
.contato-card-topo p {
font-size: 0.8rem;
}
.contato-card .contato-link {
font-size: 0.85rem;
}
.contato-link {
width: 100%;
max-width: 280px;
}
.mapa {
width: 100%;
height: 300px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.35);
}
.mapa iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
pointer-events: none;
}
}
/* =========================================
CELULARES PEQUENOS
========================================= */
@media (max-width: 400px) {
.contato {
padding: 50px 12px;
}
.contato-container {
gap: 30px;
}
.contato-info h2 {
font-size: 1.7rem;
}
.contato-info > p {
font-size: 0.88rem;
line-height: 1.6;
}
.contato-item {
margin-bottom: 22px;
}
.contato-item h3 {
font-size: 1rem;
}
.contato-item p,
.contato-link {
font-size: 0.85rem;
}
.mapa iframe {
height: 260px;
}
}
/* ===========================
MODAL DE MODELOS
=========================== */
.modal-modelos {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.75);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 9999;
}
.modal-modelos.ativo {
display: flex;
}
.modal-conteudo {
position: relative;
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
background-color: #111111;
border: 1px solid rgba(212, 175, 55, 0.45);
border-radius: 12px;
padding: 35px 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
text-align: center;
}
.modal-conteudo h2 {
color: #D4AF37;
font-size: 1.5rem;
margin-bottom: 8px;
}
.modal-conteudo > p {
color: #a8a8a8;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 25px;
}
.modal-fechar {
position: absolute;
top: 12px;
right: 15px;
width: 35px;
height: 35px;
border: none;
background: transparent;
color: #D4AF37;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: 0.3s ease;
}
.modal-fechar:hover {
color: #ffffff;
transform: scale(1.1);
}
.modelos-lista {
display: flex;
flex-direction: column;
gap: 10px;
}
.modelo-opcao {
display: block;
width: 100%;
padding: 14px 18px;
background-color: #181818;
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 7px;
color: #f5f5f5;
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: 0.3s ease;
}
.modelo-opcao:hover {
background-color: #202020;
border-color: #D4AF37;
color: #D4AF37;
transform: translateY(-2px);
}