/* ========================================================================== Multinível · proposta v2 · pele dos painéis (22/09/2026) Carregar por último, nesta ordem: multinivel.css, dashboard.css, v2.css, dash-v2.css em páginas com e . Este arquivo não cria componente novo. Ele reveste os .mn-dash-* e os .mn-* que os painéis usam com a cara do v2, usando só as variáveis de v2.css (--bg, --fg, --line, --card, --accent, --btn-bg...). Os cartões de gráfico continuam claros por dentro (#EEF2F0, um cinza esverdeado, mais suave que o branco puro), porque o kit MNCharts desenha para fundo claro. Todo balão escuro usa fundo opaco (--card, --bg-2 ou --bg-3), para os pontos do fundo não atravessarem o texto. Índice 1. Tokens antigos apontados para o v2 2. Página, blocos, largura, títulos de seção 3. Tipografia auxiliar (.mn-eyebrow, .mn-rule, .mn-accent, .mn-skip) 4. Botões .mn-btn 5. Abertura (.mn-dash-hero) 6. Nota e aviso 7. Filtros, controle segmentado e select 8. KPIs 9. Cartões de gráfico (claros) e cartão escuro 10. Selos 11. Fechamento (.mn-dash-pitch) 12. Tarja de teste da área do cliente 13. Kit de gráficos: só a fonte 14. Responsivo 15. Impressão ========================================================================== */ /* ---------- 1. Tokens antigos apontados para o v2 ---------- */ :root { --mn-font-display: var(--font-sans); --mn-font-body: var(--font-sans); --mn-header-h: var(--nav-h); --mn-radius-sm: var(--r-sm); --mn-radius-md: var(--r-md); --mn-radius-lg: var(--r-lg); --mn-radius-pill: var(--r-pill); /* traço fino sobre os cartões brancos */ --dash-line-claro: rgba(16, 19, 18, .12); --dash-line-claro-2: rgba(16, 19, 18, .24); /* fundo dos cartões claros: cinza esverdeado, menos ofuscante que o branco sobre a tela escura */ --dash-claro: #EEF2F0; --dash-claro-2: #DCE8E1; } /* ---------- 2. Página, blocos, largura, títulos de seção ---------- */ /* dashboard.css pinta .mn-dash de papel claro; aqui volta o fundo do v2 (verde quase preto com pontos). O body não pode ficar transparente, senão a tela fica branca. */ body.mn-dash { color: var(--fg); font-family: var(--font-sans); background-color: var(--bg); background-image: radial-gradient(circle, rgba(var(--dot), var(--dot-a)) 1px, transparent 1.6px); background-size: 26px 26px; background-attachment: fixed; } /* com JavaScript, a malha de nós (canvas .malha, de v2.js) substitui os pontos */ html[data-malha="on"] body.mn-dash { background-image: none; } /* multinivel.css escurece qualquer link no hover; sobre o fundo escuro isso some */ :where(body.mn-dash) a:hover { color: inherit; } /* a largura do conteúdo acompanha o cabeçalho do v2 (.wrap: 1200px e a mesma margem) */ .mn-wrap { padding-inline: var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); } .mn-wrap.mn-dash-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); } .mn-dash-bloco { background: transparent; } .mn-dash-bloco--branco { background: transparent; border-top: 1px solid var(--line); } /* o cabeçalho de seção ocupa a largura do conteúdo (antes parava em 820px) */ .mn-dash-secao { margin-bottom: clamp(24px, 3vw, 36px); max-width: none; } .mn-dash-secao__titulo { font-family: var(--font-sans); font-weight: 600; text-transform: none; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.02em; color: var(--fg); } .mn-dash-secao p { color: var(--fg-2); font-size: 16.5px; line-height: 1.6; max-width: none; } .mn-dash-secao p strong { color: var(--fg); } /* ---------- 3. Tipografia auxiliar ---------- */ .mn-eyebrow { display: inline-block; margin: 0 0 18px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); } .mn-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 10px 4px 0; background: var(--accent); vertical-align: middle; } .mn-rule { width: 120px; height: 1px; border: 0; margin: 28px 0 0; background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0)); } /* dentro de um título, o destaque vira a frase em serifa do v2 */ .mn-dash-hero__titulo .mn-accent, .mn-dash-secao__titulo .mn-accent, .mn-dash-pitch__frase .mn-accent, .mn-dash-aviso__titulo .mn-accent, .mn-dash-card__titulo .mn-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--fg); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-card__titulo .mn-accent { color: var(--ink); } /* fora de título, o destaque só ganha peso, sem cor nova */ .mn-accent, .mn-accent--light { color: inherit; font-weight: 600; } .mn-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--r-sm); font-family: var(--font-sans); font-weight: 600; } .mn-skip:focus { left: 12px; top: 12px; } /* ---------- 4. Botões ---------- */ /* dois nomes de classe para vencer as regras de multinivel.css, que fixam o gradiente até no :hover e no :focus-visible */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r-pill); font: 500 15px/1 var(--font-sans); letter-spacing: -0.005em; white-space: nowrap; box-shadow: none; transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .mn-btn:hover { transform: translateY(-1px); } .mn-btn:active { transform: translateY(0); } .mn-btn svg { width: 16px; height: 16px; flex: none; } .mn-btn.mn-btn--primary, .mn-btn.mn-btn--primary:focus-visible, .mn-btn.mn-btn--primary:active, .mn-btn.mn-btn--light, .mn-btn.mn-btn--light:focus-visible { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; box-shadow: none; } .mn-btn.mn-btn--primary:hover, .mn-btn.mn-btn--light:hover { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .mn-btn.mn-btn--ghost, .mn-btn.mn-btn--ghost-light, .mn-btn.mn-btn--entrar { background: transparent; color: var(--fg); border: 1px solid var(--line-2); padding: 13px 24px; } .mn-btn.mn-btn--ghost:hover, .mn-btn.mn-btn--ghost-light:hover, .mn-btn.mn-btn--entrar:hover { background: transparent; color: var(--fg); border-color: var(--fg); } /* escuro: visível tanto sobre o fundo da página quanto dentro de um cartão branco */ .mn-btn.mn-btn--dark { background: var(--g-900); color: var(--white); border-color: var(--line-2); } .mn-btn.mn-btn--dark:hover { background: var(--g-700); color: var(--white); } /* dentro dos cartões brancos, o botão branco some; ele se inverte */ .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--primary, .mn-dash-kpi--destaque .mn-btn.mn-btn--primary { background: var(--g-900); color: var(--white); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--primary:hover, .mn-dash-kpi--destaque .mn-btn.mn-btn--primary:hover { background: var(--g-600); color: var(--white); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--ghost, .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--ghost-light, .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--entrar { color: var(--ink); border-color: var(--dash-line-claro-2); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--ghost:hover, .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--ghost-light:hover, .mn-dash-card:not(.mn-dash-card--petrol) .mn-btn.mn-btn--entrar:hover { color: var(--ink); border-color: var(--ink); } /* ---------- 5. Abertura ---------- */ .mn-dash-hero { background: transparent; color: var(--fg); overflow: visible; padding-block: clamp(72px, 10vw, 148px) clamp(40px, 5vw, 72px); } .mn-dash-hero::after { content: none; display: none; } .mn-dash-hero__inner { gap: clamp(28px, 5vw, 80px); align-items: end; } .mn-dash-hero__copy { gap: 20px; } .mn-dash-hero__selo { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; padding: 5px 10px; border: 0; border-radius: 4px; background: color-mix(in srgb, rgb(var(--ring)) 16%, var(--bg)); color: var(--fg); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .mn-dash-hero__selo svg { width: 14px; height: 14px; stroke-width: 2; } .mn-dash-hero__titulo { font-family: var(--font-sans); font-weight: 600; text-transform: none; color: var(--fg); font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.02em; } .mn-dash-hero .mn-rule { margin-top: 4px; } .mn-dash-hero__sub { color: var(--fg-2); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; max-width: 62ch; } .mn-dash-hero__sub strong { color: var(--fg); font-weight: 600; } /* sem o cartão de fatos ao lado, o texto da abertura usa a largura inteira */ .mn-dash-hero__copy:only-child { grid-column: 1 / -1; max-width: none; } .mn-dash-hero__copy:only-child .mn-dash-hero__sub { max-width: none; } .mn-dash-hero__fatos { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; gap: 18px 24px; } .mn-dash-hero__fatos dt { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .mn-dash-hero__fatos dd { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--fg); } /* ---------- 6. Nota e aviso ---------- */ .mn-dash-nota { padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.6; color: var(--fg-2); } .mn-dash-nota svg { stroke: var(--fg-2); stroke-width: 2; } .mn-dash-nota strong { color: var(--fg); } .mn-dash-nota a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* dados simulados: a borda âmbar fica para continuar chamando atenção */ .mn-dash-aviso { border: 2px solid var(--mn-amber); border-radius: var(--r-lg); box-shadow: none; background: color-mix(in srgb, var(--mn-amber) 9%, var(--bg-2)); color: var(--fg); } .mn-dash-aviso__icone { color: var(--g-950); } .mn-dash-aviso__titulo { font-family: var(--font-sans); font-weight: 600; text-transform: none; color: var(--fg); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -0.02em; } .mn-dash-aviso p { color: var(--fg); } .mn-dash-aviso p strong { color: var(--fg); } .mn-dash-aviso a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* ---------- 7. Filtros ---------- */ .mn-dash-filtros { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; color: var(--fg); } .mn-dash-filtros--fixa { top: calc(var(--nav-h) + 10px); } .mn-dash-filtro__rotulo { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .mn-dash-filtros__resumo { color: var(--fg-2); } .mn-dash-filtros__resumo strong { color: var(--fg); } .mn-dash-seg { background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); } .mn-dash-seg__op span, .mn-dash-seg > button { font-family: var(--font-sans); font-weight: 500; color: var(--fg-2); } .mn-dash-seg__op:hover span, .mn-dash-seg > button:hover { background: var(--card-hover); color: var(--fg); } .mn-dash-seg__op input:checked + span, .mn-dash-seg > button[aria-selected="true"], .mn-dash-seg > button[aria-checked="true"] { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; } .mn-dash-seg__op input:focus-visible + span, .mn-dash-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mn-dash-select select { font-family: var(--font-sans); font-weight: 500; color: var(--fg); background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); border: 1px solid var(--line-2); border-radius: var(--r-md); } .mn-dash-select select:hover { border-color: var(--fg-2); } .mn-dash-select select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; } /* a lista aberta é desenhada pelo sistema; fundo claro e texto escuro em qualquer navegador */ .mn-dash-select option { color: var(--ink); background: var(--white); } /* dentro de cartão claro, o select também fica claro */ .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-select select, .mn-dash-kpi--destaque .mn-dash-select select { color: var(--ink); background-color: var(--white); border-color: var(--dash-line-claro-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23101312' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-select select:hover, .mn-dash-kpi--destaque .mn-dash-select select:hover { border-color: var(--ink-2); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-select select:focus-visible, .mn-dash-kpi--destaque .mn-dash-select select:focus-visible { border-color: var(--g-600); outline-color: var(--g-600); } /* ---------- 7b. Barra de filtros presa: encolhe e sai de cena ao rolar para baixo ---------- */ /* v2.js marca a barra com data-stuck="on" quando ela está grudada no topo e com data-hidden="on" enquanto a pessoa rola para baixo. Só vale em tela larga, onde a barra é sticky. */ @media (min-width: 761px) { .ies-barra, .cli-barra, .edu-barra, .mn-dash-filtros--fixa { transition: transform .32s var(--ease), opacity .24s var(--ease); } [data-stuck="on"] .mn-dash-filtros, .mn-dash-filtros--fixa[data-stuck="on"] { padding-block: 8px 9px; gap: 6px 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); } [data-stuck="on"] .mn-dash-filtro__rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } [data-stuck="on"] .mn-dash-filtro { position: relative; gap: 0; } [data-stuck="on"] .mn-dash-seg { padding: 3px; } [data-stuck="on"] .mn-dash-seg__op span, [data-stuck="on"] .mn-dash-seg > button { min-height: 30px; padding: 4px 10px; font-size: 13px; } [data-stuck="on"] .mn-dash-select select { min-height: 36px; padding-block: 5px; font-size: 13.5px; } [data-stuck="on"] .mn-dash-filtros__resumo { font-size: 12.5px; } [data-stuck="on"] .ies-linha + .ies-linha, [data-stuck="on"] .cli-filtro-linha + .cli-filtro-linha { padding-top: 6px; margin-top: 0; } [data-hidden="on"] { transform: translateY(calc(-100% - var(--nav-h) - 24px)); opacity: 0; pointer-events: none; } [data-hidden="on"] .mn-dash-filtros { pointer-events: none; } } /* ---------- 7c. Segmentado e rótulo de filtro dentro de cartão branco ---------- */ .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-filtro__rotulo { color: var(--ink-3); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg { background: var(--paper); border-color: var(--dash-line-claro-2); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg__op span, .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg > button { color: var(--ink-2); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg__op:hover span, .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg > button:hover { background: var(--g-100); color: var(--ink); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg__op input:checked + span, .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg > button[aria-selected="true"] { background: var(--g-900); color: var(--white); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-dash-seg__op input:focus-visible + span { outline-color: var(--g-600); } /* ---------- 8. KPIs ---------- */ .mn-dash-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; color: var(--fg); } .mn-dash-kpi__rotulo { font-family: var(--font-sans); font-size: 14px; color: var(--fg-2); } .mn-dash-kpi__valor { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(32px, 3.2vw, 46px); color: var(--fg); } .mn-dash-kpi__unidade { font-family: var(--font-sans); color: var(--fg-2); } .mn-dash-kpi__nota { font-size: 13px; color: var(--fg-3); } .mn-dash-kpi__var { color: var(--fg-2); } /* as fichas de variação misturam com --card, para seguirem opacas */ .mn-dash-kpi__var b { background: color-mix(in srgb, #FFFFFF 8%, var(--card)); color: var(--fg); } .mn-dash-kpi__var svg { stroke: var(--fg-2); } .mn-dash-kpi__var--bom b { background: color-mix(in srgb, var(--g-300) 18%, var(--card)); } .mn-dash-kpi__var--bom svg { stroke: var(--g-300); } .mn-dash-kpi__var--ruim b { background: color-mix(in srgb, var(--mn-danger) 24%, var(--card)); color: var(--fg); } .mn-dash-kpi__var--ruim svg { stroke: var(--mn-danger); } /* destaque invertido: o número principal em cartão claro */ .mn-dash-kpi--destaque { background: var(--dash-claro); border-color: transparent; color: var(--ink); } .mn-dash-kpi--destaque .mn-dash-kpi__rotulo { color: var(--ink-2); } .mn-dash-kpi--destaque .mn-dash-kpi__valor { color: var(--ink); } .mn-dash-kpi--destaque .mn-dash-kpi__unidade, .mn-dash-kpi--destaque .mn-dash-kpi__nota { color: var(--ink-3); } .mn-dash-kpi--destaque .mn-dash-kpi__var { color: var(--ink-2); } .mn-dash-kpi--destaque .mn-dash-kpi__var b { background: var(--dash-claro-2); color: var(--ink); } .mn-dash-kpi--destaque .mn-dash-kpi__var svg { stroke: var(--g-600); } .mn-dash-kpi--destaque .mn-dash-kpi__var--ruim b { background: rgba(214, 69, 69, .12); } .mn-dash-kpi--destaque .mn-dash-kpi__var--ruim svg { stroke: var(--mn-danger); } /* ---------- 9. Cartões de gráfico ---------- */ /* Claros por dentro: o kit desenha para fundo claro. Todo texto solto dentro deles é --ink. O fundo é #EEF2F0, e não branco puro, para não ofuscar sobre a tela escura. */ .mn-dash-card { background: var(--dash-claro); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; } .mn-dash-card:not(.mn-dash-card--petrol) :is(h2, h3, h4) { color: var(--ink); } .mn-dash-card__titulo { font-family: var(--font-sans); font-weight: 600; text-transform: none; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); } .mn-dash-card__sub { color: var(--ink-2); font-size: 14.5px; } .mn-dash-card__leitura { background: var(--dash-claro-2); color: var(--ink); border-radius: var(--r-md); } .mn-dash-card__leitura strong { color: var(--ink); } .mn-dash-card__rodape { border-top: 1px solid var(--dash-line-claro); } .mn-dash-fonte { color: var(--ink-3); } .mn-dash-fonte a { color: var(--g-600); text-decoration: underline; text-underline-offset: 2px; } .mn-dash-card--mint { background: var(--dash-claro); } /* Variáveis dos cartões claros. --mnc-surface é o fundo que o kit usa nas células fixas (cabeçalho de linha do mapa de calor); precisa ser igual ao do cartão. --ink-3 escurece um pouco porque o cinza original ficava abaixo de 4,5:1 sobre #EEF2F0. */ .mn-dash-card:not(.mn-dash-card--petrol), .mn-dash-kpi--destaque { --mnc-surface: var(--dash-claro); --ink-3: #5A6661; } /* o kit fixa --mnc-surface: #fff no próprio .mnc; aqui ele volta a seguir o cartão */ body.mn-dash .mn-dash-card:not(.mn-dash-card--petrol) .mnc, body.mn-dash .mn-dash-kpi--destaque .mnc { --mnc-surface: var(--dash-claro); } /* tabela do kit: sem caixa branca dentro do cartão claro; o cabeçalho fixo ganha um tom próprio */ body.mn-dash .mn-dash-card:not(.mn-dash-card--petrol) .mnc__table { background: var(--dash-claro); border-color: var(--dash-line-claro); } body.mn-dash .mn-dash-card:not(.mn-dash-card--petrol) .mnc-table thead th { background: #E3E9E6; } body.mn-dash .mn-dash-card:not(.mn-dash-card--petrol) .mnc-table th, body.mn-dash .mn-dash-card:not(.mn-dash-card--petrol) .mnc-table td { border-top-color: var(--dash-line-claro); } .mn-dash-numero { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(42px, 4.8vw, 62px); color: var(--ink); } .mn-dash-pares dt, .mn-dash-pares dd { border-top: 1px solid var(--dash-line-claro); } .mn-dash-pares dt { color: var(--ink-2); } .mn-dash-pares dd { color: var(--ink); } /* cartão escuro, no padrão .card do v2 */ .mn-dash-card--petrol { background: var(--card); color: var(--fg); border: 1px solid var(--line); } .mn-dash-card--petrol .mn-dash-card__titulo { color: var(--fg); } .mn-dash-card--petrol .mn-dash-card__sub { color: var(--fg-2); } .mn-dash-card--petrol .mn-dash-card__leitura { background: color-mix(in srgb, rgb(var(--ring)) 10%, var(--card)); color: var(--fg); } .mn-dash-card--petrol .mn-dash-card__leitura strong { color: var(--fg); } .mn-dash-card--petrol .mn-dash-card__rodape { border-top-color: var(--line); } .mn-dash-card--petrol .mn-dash-fonte { color: var(--fg-3); } .mn-dash-card--petrol .mn-dash-fonte a { color: var(--fg-2); } .mn-dash-card--petrol .mn-dash-numero { color: var(--fg); } .mn-dash-card--petrol .mn-dash-pares dt, .mn-dash-card--petrol .mn-dash-pares dd { border-top-color: var(--line); } .mn-dash-card--petrol .mn-dash-pares dt { color: var(--fg-2); } .mn-dash-card--petrol .mn-dash-pares dd { color: var(--fg); } /* tipografia auxiliar dentro do branco */ .mn-dash-card:not(.mn-dash-card--petrol) .mn-eyebrow, .mn-dash-kpi--destaque .mn-eyebrow { color: var(--ink-2); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-eyebrow::before, .mn-dash-kpi--destaque .mn-eyebrow::before { background: var(--g-600); } .mn-dash-card:not(.mn-dash-card--petrol) .mn-rule, .mn-dash-kpi--destaque .mn-rule { background: linear-gradient(90deg, var(--g-600), rgba(16, 19, 18, 0)); } /* foco: limão no escuro, verde escuro no branco (o limão some sobre o branco) */ .mn-dash-hero :focus-visible, .mn-dash-pitch :focus-visible, .mn-dash-card--petrol :focus-visible, .mn-dash-filtros :focus-visible { outline-color: var(--accent); } .mn-dash-card:not(.mn-dash-card--petrol) :focus-visible, .mn-dash-kpi--destaque :focus-visible { outline-color: var(--g-600); } /* ---------- 10. Selos ---------- */ /* Fundo claro e texto escuro em qualquer fundo; o simulado continua âmbar. */ .mn-dash-selo { font-family: var(--font-sans); font-weight: 600; color: var(--ink); background: linear-gradient(var(--mn-amber-soft), var(--mn-amber-soft)), var(--white); border: 1.5px solid var(--mn-amber); border-radius: var(--r-pill); } .mn-dash-selo::before { background: var(--mn-amber); box-shadow: 0 0 0 1.5px var(--ink); } .mn-dash-selo--real { background: var(--g-100); border-color: var(--g-500); } .mn-dash-selo--real::before { background: var(--g-500); box-shadow: none; } .mn-dash-selo--neutro { background: var(--paper); border-color: var(--ink-3); } .mn-dash-selo--neutro::before { background: var(--ink-3); box-shadow: none; } /* ---------- 11. Fechamento ---------- */ .mn-dash-pitch, .mn-dash-pitch--grad, .mn-dash-pitch--mint { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--fg); gap: 22px; padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 64px); } .mn-dash-pitch::before, .mn-dash-pitch::after { content: none; display: none; } .mn-dash-pitch__frase { font-family: var(--font-sans); font-weight: 600; text-transform: none; color: var(--fg); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.02em; max-width: 22ch; } .mn-dash-pitch__frase--longa { font-size: clamp(23px, 2.6vw, 34px); line-height: 1.15; max-width: 32ch; } .mn-dash-pitch__apoio, .mn-dash-pitch--mint .mn-dash-pitch__apoio { color: var(--fg-2); } .mn-dash-pitch__apoio strong, .mn-dash-pitch--mint .mn-dash-pitch__apoio strong { color: var(--fg); } .mn-dash-pitch--mint .mn-accent { color: var(--fg); } .mn-dash-pitch--mint :focus-visible { outline-color: var(--accent); } /* ---------- 12. Tarja de teste da área do cliente ---------- */ /* body na frente para vencer o