/* ============================================================ SKIN PREMIUM — camada de sobreposição (override) Ativa apenas quando . Direção: menos cor, menos caixa, mais tipografia, mais ar, microinterações com assinatura. Carregada por layout.js. ============================================================ */ .skin-premium { --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur: 140ms; --chip-neutral: rgba(120, 130, 125, 0.14); } /* ---------- 8 · Canvas: largura máxima + ar ---------- */ .skin-premium .container-fluid.content-area { max-width: 1240px; margin-inline: auto; padding: 32px 40px; } .skin-premium .content-area .row { --bs-gutter-y: 1.5rem; } @media (max-width: 767.98px) { .skin-premium .container-fluid.content-area { padding: 20px 16px; } } /* ---------- Header dark mantido (assinatura da marca, aprovado) ---------- O Premium NÃO altera a navbar — ela herda o header --ink do theme.css. */ /* ---------- 2 · Cards sem moldura: separação por fundo + espaço ---------- */ .skin-premium .card { border: 0; box-shadow: none; border-radius: 12px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* elevação só em cards genuinamente clicáveis (produto, plano) */ .skin-premium .pricing-card:hover, .skin-premium .product-thumb { transition: transform var(--dur) var(--ease); } .skin-premium .col:hover > .card:has(.product-thumb), .skin-premium .pricing-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 59, 44, 0.1); } /* ---------- 1 · Matar o arco-íris: chips de ícone monocromáticos ---------- */ .skin-premium :is(.table, .report-list-item, .email-item, .chat-contact, .timeline, .dropdown-menu) .avatar[class*="bg-label-"] { background: var(--chip-neutral); color: var(--vx-muted-color); } /* KPIs, papéis e status permanecem coloridos (não são listas) */ /* ---------- 3 · Tipografia com mais contraste ---------- */ .skin-premium body { font-size: 14px; letter-spacing: -0.006em; font-feature-settings: "cv05", "ss01", "tnum"; } .skin-premium h1, .skin-premium h2, .skin-premium h3, .skin-premium h4, .skin-premium .page-title { letter-spacing: -0.02em; font-weight: 600; } .skin-premium .page-title { font-size: 22px; } .skin-premium .card-title { font-size: 15px; font-weight: 600; } .skin-premium .card-subtitle, .skin-premium .text-muted-vx { font-size: 12px; } .skin-premium .table thead th { font-size: 11px; letter-spacing: 0.06em; color: var(--vx-muted-color); font-weight: 600; } /* números grandes dos KPIs ganham peso e escala */ .skin-premium .card-body h3, .skin-premium .card-body h2 { font-weight: 700; letter-spacing: -0.03em; } /* ---------- 7 · Sem gradiente, sem casual ---------- */ .skin-premium .menu-item.active > .menu-link { background: rgba(var(--vx-primary-rgb), 0.14); color: var(--vx-primary-emphasis); font-weight: 600; box-shadow: none; } .skin-premium .menu-item.active > .menu-link i { color: var(--vx-primary-emphasis); } /* rodapé discreto e sem o coração vermelho */ .skin-premium .layout-footer { font-size: 12px; opacity: 0.75; } .skin-premium .layout-footer .text-danger { color: var(--vx-muted-color) !important; } /* ---------- 5 · Microinterações com assinatura ---------- */ .skin-premium .btn { border-radius: 8px; box-shadow: none !important; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .skin-premium .btn:active { transform: scale(0.97); } .skin-premium .menu-link, .skin-premium .report-list-item, .skin-premium .cmdk-item { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .skin-premium .navbar-icon-btn { transition: background-color var(--dur) var(--ease); } /* ---------- Refinos gerais ---------- */ .skin-premium .badge { font-weight: 600; letter-spacing: 0.01em; } .skin-premium .sidebar { border-right: 1px solid var(--vx-border-color); } .skin-premium .dropdown-menu { border-radius: 10px; } .skin-premium .form-control, .skin-premium .form-select { border-radius: 8px; }