/* ================================================================== ImpérioMC 3D - global.css Variáveis de marca, tipografia e componentes reutilizáveis. Este arquivo é carregado em TODAS as páginas do site público. ================================================================== */ :root { /* Paleta oficial da marca - Tema "Padrão" */ --imc-bg-claro: #F6F3F1; /* fundo geral claro */ --imc-verde-salvia: #7D8E86; /* cor primária - transmite calma/terapêutico */ --imc-terracota: #D48E5C; /* cor de destaque/ação (CTAs) */ --imc-areia: #C7B19C; /* tom neutro secundário */ --imc-cinza-malva: #C1BAB4; /* bordas, textos secundários */ --imc-texto-escuro: #3A3835; --imc-branco: #FFFFFF; --imc-radius: 14px; --imc-shadow: 0 4px 18px rgba(58, 56, 53, 0.08); --imc-transition: all 0.25s ease-in-out; } /* ================================================================== Tema "Elegante" - segunda paleta solicitada pelo cliente. Ativado quando . As variáveis CSS abaixo sobrescrevem as do :root para todos os elementos da página, sem precisar duplicar nenhuma regra de estilo existente. ================================================================== */ [data-tema="elegante"] { --imc-bg-claro: #EFEFE9; /* fundo geral claro (creme) */ --imc-verde-salvia: #959D90; /* cor primária - verde-acinzentado */ --imc-terracota: #523D35; /* cor de destaque/ação (CTAs) - marrom profundo */ --imc-areia: #E8D9CD; /* tom neutro secundário - creme rosado */ --imc-cinza-malva: #BBA58F; /* bordas, textos secundários - bege */ --imc-texto-escuro: #223030; /* verde-escuro quase preto */ --imc-branco: #FFFFFF; } * { box-sizing: border-box; } html, body { height: 100%; } body { background-color: var(--imc-bg-claro); color: var(--imc-texto-escuro); font-family: 'Poppins', 'Segoe UI', sans-serif; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } h1, h2, h3, h4, h5, .font-title { font-family: 'Fredoka', 'Poppins', sans-serif; color: var(--imc-texto-escuro); } a { text-decoration: none; color: var(--imc-verde-salvia); } /* ---------- Botões da marca ---------- */ .btn-imc-primary { background-color: var(--imc-terracota); border-color: var(--imc-terracota); color: var(--imc-branco); border-radius: var(--imc-radius); font-weight: 600; transition: var(--imc-transition); } .btn-imc-primary:hover, .btn-imc-primary:focus { background-color: #bd753f; border-color: #bd753f; color: var(--imc-branco); } .btn-imc-secondary { background-color: transparent; border: 2px solid var(--imc-verde-salvia); color: var(--imc-verde-salvia); border-radius: var(--imc-radius); font-weight: 600; transition: var(--imc-transition); } .btn-imc-secondary:hover { background-color: var(--imc-verde-salvia); color: var(--imc-branco); } /* ---------- Cards ---------- */ .card-imc { background-color: var(--imc-branco); border: 1px solid var(--imc-cinza-malva); border-radius: var(--imc-radius); box-shadow: var(--imc-shadow); transition: var(--imc-transition); overflow: hidden; } .card-imc:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(58, 56, 53, 0.14); } /* ---------- Badges ---------- */ .badge-atacado { background-color: var(--imc-verde-salvia); color: #fff; } .badge-varejo { background-color: var(--imc-areia); color: var(--imc-texto-escuro); } /* ---------- Navbar ---------- */ .navbar-imc { background-color: var(--imc-branco); box-shadow: var(--imc-shadow); } .navbar-imc .nav-link { color: var(--imc-texto-escuro); font-weight: 500; } .navbar-imc .nav-link:hover, .navbar-imc .nav-link.active { color: var(--imc-terracota); } .logo-navbar { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; box-shadow: 0 2px 8px rgba(58, 56, 53, 0.25); } /* ---------- Rodapé ---------- */ .footer-imc { background-color: var(--imc-verde-salvia); color: var(--imc-bg-claro); } .footer-imc a { color: var(--imc-bg-claro); } .footer-imc a:hover { color: var(--imc-terracota); } .logo-footer { max-width: 220px; border-radius: var(--imc-radius); } /* ---------- Alertas flash ---------- */ .alert-imc-sucesso { background-color: rgba(125, 142, 134, 0.15); border: 1px solid var(--imc-verde-salvia); color: var(--imc-texto-escuro); border-radius: var(--imc-radius); } .alert-imc-erro { background-color: rgba(212, 142, 92, 0.15); border: 1px solid var(--imc-terracota); color: var(--imc-texto-escuro); border-radius: var(--imc-radius); } /* ---------- Utilidades ---------- */ .text-imc-primary { color: var(--imc-verde-salvia) !important; } .text-imc-accent { color: var(--imc-terracota) !important; } .bg-imc-claro { background-color: var(--imc-bg-claro) !important; } .bg-imc-primary { background-color: var(--imc-verde-salvia) !important; } .rounded-imc { border-radius: var(--imc-radius) !important; } /* ---------- Responsividade / mobile ---------- */ @media (max-width: 576px) { h1 { font-size: 1.7rem; } h2 { font-size: 1.4rem; } .card-imc:hover { transform: none; } } /* ================================================================== Alternador de Tema (Toggle de Paleta de Cores) Switch visual que troca entre o tema "Padrão" e o tema "Elegante" alterando o atributo data-tema em (ver global.js). ================================================================== */ .tema-switch-wrapper { display: inline-flex; align-items: center; gap: 6px; } .tema-switch-input { display: none; } .tema-switch-label { position: relative; display: inline-block; width: 54px; height: 28px; border-radius: 30px; cursor: pointer; border: 2px solid var(--imc-cinza-malva); background: linear-gradient(90deg, #7D8E86 50%, #523D35 50%); transition: var(--imc-transition); flex-shrink: 0; } .tema-switch-ball { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: var(--imc-transition); } .tema-switch-input:checked + .tema-switch-label .tema-switch-ball { transform: translateX(24px); } .tema-switch-legenda { font-size: 11px; color: var(--imc-texto-escuro); line-height: 1.1; white-space: nowrap; } /* Dentro da sidebar escura do admin, a legenda precisa de contraste claro */ .adm-sidebar .tema-switch-legenda { color: rgba(255, 255, 255, 0.85); } .adm-sidebar .tema-switch-label { border-color: rgba(255, 255, 255, 0.4); }