/* ========================================================================== Pérola Motos — estilos customizados Utilitários gerais vêm do Tailwind via CDN (config no do index.html) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap'); :root { --lime-electric: #fecb0e; --bg-dark: #080808; --bg-card: #111111; --bg-muted: #1a1a1a; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Inter', sans-serif; } html, body { height: 100%; } body { background-color: var(--bg-dark); color: #f5f5f5; font-family: var(--font-body); } /* Esconde a barra de rolagem, exibindo uma fina ao passar o mouse */ * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } *:hover { scrollbar-width: thin; } /* Fonte de destaque usada nos títulos (equivalente a font-['Barlow_Condensed']) */ .font-display { font-family: var(--font-display); } /* Marquee da faixa de benefícios */ .marquee-track { animation: marquee 25s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Ícone do menu mobile (hambúrguer -> X) */ .menu-icon-bar { display: block; width: 24px; height: 2px; background: #fff; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-open .menu-icon-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-open .menu-icon-bar:nth-child(2) { opacity: 0; } .menu-open .menu-icon-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Botão de categoria de peças ativo */ .category-btn { background: transparent; color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); } .category-btn.active { background: var(--lime-electric); color: var(--bg-dark); border-color: var(--lime-electric); }