/* Cores */ :root { --verde-bandeira: #009B3A; /* Verde Bandeira */ --amarelo-principal: #FFD700; /* Amarelo Dourado */ --amarelo-claro: #FFFACD; /* Amarelo mais suave para detalhes */ --texto-escuro: #333333; --texto-claro: #FFFFFF; } /* Estilo Geral do Corpo */ body { font-family: 'Arial', sans-serif; color: var(--texto-escuro); background-color: #f8f8f8; } /* Cabeçalho */ header { background-color: var(--verde-bandeira); padding: 15px 20px; display: flex; justify-content: center; /* Centraliza o conteúdo do cabeçalho */ align-items: center; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Logo no Cabeçalho (assumindo que é uma imagem ou texto dentro do header) */ .header-logo { max-width: 180px; /* Ajuste conforme o tamanho do seu logo */ height: auto; display: block; /* Garante que o logo ocupe sua própria linha para centralização */ } /* Barra de Navegação (se houver) */ nav { background-color: var(--amarelo-principal); padding: 10px 0; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; } nav ul li { margin: 0 15px; } nav ul li a { text-decoration: none; color: var(--texto-escuro); font-weight: bold; font-size: 16px; padding: 5px 0; transition: color 0.3s ease; } nav ul li a:hover { color: var(--verde-bandeira); } /* Botões Primários */ .btn-primary { background-color: var(--amarelo-principal); color: var(--texto-escuro); border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .btn-primary:hover { background-color: #FFC107; /* Um tom um pouco mais escuro de amarelo */ } /* Seções de Produtos/Coleções */ .section-title { color: var(--verde-bandeira); text-align: center; margin-top: 40px; margin-bottom: 20px; font-size: 28px; } .product-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; background-color: var(--texto-claro); box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .product-card:hover { transform: translateY(-5px); } .product-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; } .product-card h3 { color: var(--texto-escuro); font-size: 18px; margin-bottom: 5px; } .product-card .price { color: var(--verde-bandeira); font-weight: bold; font-size: 20px; } /* Banner (exemplo) */ .main-banner { background-color: var(--amarelo-claro); padding: 50px 20px; text-align: center; margin-top: 20px; border-radius: 10px; } .main-banner h2 { color: var(--verde-bandeira); font-size: 36px; margin-bottom: 15px; } .main-banner p { color: var(--texto-escuro); font-size: 18px; margin-bottom: 25px; } /* Responsividade básica */ @media (max-width: 768px) { header { flex-direction: column; } nav ul { flex-direction: column; } nav ul li { margin: 5px 0; } .header-logo { margin-bottom: 10px; } .main-banner h2 { font-size: 28px; } .product-card { margin-bottom: 20px; } }