/* ============================================================ INOVA-TWEAKS.CSS · Sistema de variantes via data-attrs Permite trocar personalidade do site sem mudar HTML/JS Aplicar no ============================================================ */ /* ============================================================ data-brand · paleta alternativa da marca default = vermelho Inova (#c8102e) já vem do public.css ============================================================ */ /* --- BURGUNDY (vinho elegante) --- */ html[data-brand="burgundy"] { --cor-primaria: #7A1828; --cor-primaria-hover: #5E1220; --cor-primaria-suave: #6A1424; --cor-primaria-claro: #A0263A; } html[data-brand="burgundy"] .cor-primaria, html[data-brand="burgundy"] .text-primary { color: #7A1828 !important; } html[data-brand="burgundy"] .bg-primaria, html[data-brand="burgundy"] .bg-primary { background-color: #7A1828 !important; } html[data-brand="burgundy"] .borda-primaria { border-color: #7A1828 !important; } html[data-brand="burgundy"] .inova-grad-text { background-image: linear-gradient(120deg, #7A1828 0%, #A0263A 25%, #B02A40 50%, #5E1220 75%, #7A1828 100%); } html[data-brand="burgundy"] ::selection { background: #7A1828; color: #fff; } /* --- CORAL (mais quente / moderno) --- */ html[data-brand="coral"] { --cor-primaria: #F25C54; --cor-primaria-hover: #E0463E; --cor-primaria-suave: #EA5249; --cor-primaria-claro: #FF8A82; } html[data-brand="coral"] .cor-primaria, html[data-brand="coral"] .text-primary { color: #F25C54 !important; } html[data-brand="coral"] .bg-primaria, html[data-brand="coral"] .bg-primary { background-color: #F25C54 !important; } html[data-brand="coral"] .borda-primaria { border-color: #F25C54 !important; } html[data-brand="coral"] .inova-grad-text { background-image: linear-gradient(120deg, #F25C54 0%, #FF8A82 25%, #FF7368 50%, #E0463E 75%, #F25C54 100%); } html[data-brand="coral"] ::selection { background: #F25C54; color: #fff; } /* --- INDIGO (alternativa azul corporativa) --- */ html[data-brand="indigo"] { --cor-primaria: #4F46E5; --cor-primaria-hover: #3730A3; --cor-primaria-suave: #4338CA; --cor-primaria-claro: #818CF8; } html[data-brand="indigo"] .cor-primaria, html[data-brand="indigo"] .text-primary { color: #4F46E5 !important; } html[data-brand="indigo"] .bg-primaria, html[data-brand="indigo"] .bg-primary { background-color: #4F46E5 !important; } html[data-brand="indigo"] .inova-grad-text { background-image: linear-gradient(120deg, #4F46E5 0%, #818CF8 25%, #6366F1 50%, #3730A3 75%, #4F46E5 100%); } html[data-brand="indigo"] ::selection { background: #4F46E5; color: #fff; } /* ============================================================ data-density · espaçamento das seções ============================================================ */ /* spacious: mais ar entre as seções (premium) */ html[data-density="spacious"] section, html[data-density="spacious"] .section { padding-top: 6rem !important; padding-bottom: 6rem !important; } @media (min-width: 768px) { html[data-density="spacious"] section, html[data-density="spacious"] .section { padding-top: 9rem !important; padding-bottom: 9rem !important; } } /* Hero precisa menos no topo (header ocupa espaço) */ html[data-density="spacious"] section:first-of-type, html[data-density="spacious"] .hero { padding-top: 4rem !important; } /* dense: mais compacto (mais conteúdo na tela) */ html[data-density="dense"] section, html[data-density="dense"] .section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } @media (min-width: 768px) { html[data-density="dense"] section, html[data-density="dense"] .section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } } /* Seções com classe .keep-padding ignoram tweak (ex: hero, marquee) */ html[data-density="spacious"] .keep-padding, html[data-density="dense"] .keep-padding { padding-top: revert !important; padding-bottom: revert !important; } /* ============================================================ data-motion · intensidade das animações ============================================================ */ /* off: zera tudo */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } html[data-motion="off"] .inova-fade-in, html[data-motion="off"] .inova-scale-in, html[data-motion="off"] .inova-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } html[data-motion="off"] .inova-grad-text { animation: none !important; background: var(--cor-primaria, #c8102e) !important; -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-motion="off"] .inova-float-a, html[data-motion="off"] .inova-float-b, html[data-motion="off"] .inova-shimmer::after, html[data-motion="off"] .inova-bob, html[data-motion="off"] .inova-spin-slow, html[data-motion="off"] .inova-pulse-dot { animation: none !important; } /* energetic: mais rápido / visível */ html[data-motion="energetic"] .inova-fade-in { animation-duration: 0.55s !important; } html[data-motion="energetic"] .inova-scale-in { animation-duration: 0.6s !important; } html[data-motion="energetic"] .inova-grad-text { animation-duration: 4s !important; } html[data-motion="energetic"] .inova-shimmer::after { animation-duration: 2.8s !important; } html[data-motion="energetic"] .inova-pulse-dot { animation-duration: 1.2s !important; }