/* ============================================================ megamenu.css — Didata Sistemas · Direção de arte (Etapa 2) ------------------------------------------------------------ Refinamento dos mega-menus e do header, no padrão dos benchmarks (ContaAzul / Bling / Senior): · escala tipográfica dos itens: título 14px · descrição 13px · títulos de grupo 12px uppercase com letter-spacing .1em · hover com fundo gelo e raio 10px em toda a área do item · animação de abertura 180ms (fade + deslize sutil) · caret (setinha) fino que gira ao abrir Carregado por ÚLTIMO no , depois de tipografia.css. ============================================================ */ /* ── Abertura animada ──────────────────────────────────────── */ @keyframes megaIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } } .mega{ animation: megaIn .18s ease both } /* ── Caret: chevron fino, gira quando o menu abre ──────────── */ .nav-link .caret{ display:inline-block !important; /* reativa (estava oculto) */ border:solid currentColor; border-width:0 1.6px 1.6px 0; padding:2.6px; margin-top:-3px; opacity:.5; transform:rotate(45deg); /* aponta para baixo */ transition:transform .2s ease, opacity .2s ease; } .nav-item:hover .nav-link .caret{ transform:rotate(-135deg) translate(-1px,-1px); /* aponta para cima */ opacity:.9; } /* ════════════════════════════════════════════════════════════ 1 · PLATAFORMA (mega-wide · classes msw-*) ════════════════════════════════════════════════════════════ */ /* O rótulo "Recursos disponíveis" saiu do HTML: não informava nada que o próprio menu já não dissesse, e custava 22px de altura num painel que precisa caber em tela de notebook. Regra mantida para o caso de voltar. */ .msw-header{ font-size:.7rem !important; letter-spacing:.12em !important; color:#5a7186 !important; /* era #94a3b8: 2,56:1, ilegível */ margin-bottom:22px !important; } /* ───────────────────────────────────────────────────────────── ESCALA ÚNICA DOS TRÊS MEGA-MENUS Medido em 04/08/2026: os três usavam valores parecidos mas nunca iguais — título em 14px/600 no Plataforma, 14,4px/700 no Soluções e 14px/700 no Recursos; descrição com três alturas de linha diferentes; e o rótulo do Recursos em #24cdd5 sobre branco, que dá 1,95:1 (o pior contraste do site). A régua abaixo vale para os três: rótulo/categoria 11,52px · 800 · ls .1em · #0b6d73 (claro) #24cdd5 (fundo escuro) título 14px · 600 · #1a2340 (claro) · #fff (escuro) descrição 12,8px · 400 · lh 1,45 · #5b7387 (claro) rgba(255,255,255,.7) Ao criar um mega novo, herdar daqui em vez de repetir números. ───────────────────────────────────────────────────────────── */ /* Títulos de grupo (Gestão, Financeiro, RH, Fiscal…) */ .msw-cat{ font-size:.72rem !important; /* ~12px */ font-weight:800 !important; letter-spacing:.1em !important; text-transform:uppercase; /* 3,90:1 ainda reprovava em texto pequeno (a norma pede 4,5:1). */ color:#0b6d73 !important; /* 6,1:1 sobre o branco */ border-bottom:1.5px solid #eef2f7; } /* Itens: área de clique generosa + hover com fundo */ .msw-a{ padding:7px 10px !important; margin:0 -10px 2px !important; /* hover “sangra” além do texto */ border-radius:10px; transition:background .16s ease, color .16s ease !important; } .msw-a:hover{ background:#f2fafb } .msw-title{ font-size:.875rem !important; /* 14px */ font-weight:600 !important; color:#1a2340 !important; line-height:1.35 !important; } .msw-desc{ font-size:.8rem !important; /* ~13px */ line-height:1.45 !important; /* Era #8ba0b2: 2,70:1 sobre o branco, quando a norma pede 4,5:1 para texto deste tamanho. Eram 24 linhas assim, e é o que fazia o menu inteiro parecer apagado. */ color:#5b7387 !important; /* 4,9:1 */ margin-bottom:0 !important; } /* Os ícones dos itens saíram do HTML (ver comentário no header.php). Regras mantidas caso voltem em alguma outra lista msw-*. */ .msw-icon{ width:32px !important; height:32px !important; border-radius:8px !important; } .msw-group{ margin-top:26px !important } /* Card promo no rodapé da coluna Notas Fiscais */ .msw-promo{ margin-top:26px; padding:16px; border-radius:14px; background:linear-gradient(150deg,#0b1e30,#0f3347); display:block; text-decoration:none; } .msw-promo__tag{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#24cdd5; margin-bottom:6px; } .msw-promo strong{ display:block; font-size:.875rem; font-weight:700; color:#fff; line-height:1.35; margin-bottom:10px; } .msw-promo em{ font-style:normal; display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; color:#24cdd5; } /* ════════════════════════════════════════════════════════════ 2 · SOLUÇÕES (mega grid · mega-aside + mega-card) ════════════════════════════════════════════════════════════ */ /* A foto fica no topo do bloco, sangrando até as bordas arredondadas. Proporção travada em 16:9 com object-fit: cover — trocar a imagem nunca muda a altura do menu. Isso deixa a coluna da esquerda mais alta que a dos cards, e tudo bem: o que não podia era o card ESTICAR junto e ficar com vazio dentro (ver a regra do .mega-list logo abaixo). A folga fica entre o bloco de cards e a moldura do menu, não dentro dos botões. */ /* Coluna da esquerda mais larga (era 280px): com a foto em cima, o bloco ficava 73px mais alto que a coluna dos cards, e as cinco pílulas de segmento ocupavam 765px de uma faixa de 992 — sobrava um vão à direita. Alargando aqui, os dois problemas andam juntos: o texto do bloco cabe em menos linhas (o bloco encolhe) e a faixa da direita aperta, fazendo as pílulas preencherem a largura. */ .mega.grid:not(.mega-wide):not(.mega-recursos){ grid-template-columns:460px 1fr } .mega-aside{ overflow:hidden; align-self:start } .mega-aside__foto{ display:block; /* max-width:none é obrigatório: o styles.css tem img{max-width:100%} e ele cancelaria o sangramento, deixando a foto 48px mais estreita que o bloco. */ width:calc(100% + 48px); max-width:none; margin:-24px -24px 18px; /* Altura fixa em vez de proporção: alargando o bloco, o 16:9 faria a foto crescer junto e devolveria a altura que a gente acabou de ganhar. */ height:150px; object-fit:cover; } .mega-aside h4{ font-size:1.05rem; letter-spacing:-.01em } .mega-aside p{ font-size:.875rem; line-height:1.6 } /* Grade de duas colunas: o ícone ocupa a primeira e atravessa as duas linhas; título e descrição ficam na segunda. Feito por grid e não por wrapper novo porque o precisa continuar sendo filho direto do card — é ele que o tradutor procura. */ /* O card tem a altura do próprio conteúdo, e é o BLOCO de cards que se centraliza na coluna. Esticando cada card para acompanhar a foto do lado, sobravam quase 40px de vazio dentro de cada um — e vazio dentro de um botão lê como card inacabado. Centralizando o bloco, a folga vai para FORA dos cards, entre eles e a moldura do menu, que é onde ela não incomoda. */ .mega-list{ align-content:start } .mega-card{ display:grid !important; grid-template-columns:auto 1fr; align-content:center; column-gap:13px; align-items:center; border-radius:12px; transition:background .16s ease, border-color .16s ease, transform .16s ease; } .mega-card:hover{ transform:translateY(-1px) } .mega-card__icon{ grid-column:1; grid-row:1 / span 2; width:38px; height:38px; border-radius:10px; background:#e8f9f9; display:flex !important; align-items:center; justify-content:center; transition:background .16s ease; } .mega-card:hover .mega-card__icon{ background:#d4f5f6 } .mega-card > strong{ grid-column:2; grid-row:1; font-size:.875rem !important; /* 14px, igual aos outros megas */ font-weight:600 !important; color:#1a2340; margin-bottom:4px !important; } .mega-card > span[data-i18n]{ grid-column:2; grid-row:2; font-size:.8rem !important; /* 13px */ line-height:1.45 !important; /* Era #8ba0b2, o mesmo 2,70:1 que já tinha sido corrigido no menu Plataforma. Aqui tinha ficado para trás. */ color:#5b7387 !important; } /* Faixa de segmentos, na largura toda embaixo dos quatro documentos. */ .mega-seg{ grid-column:1 / -1; margin-top:6px } .mega-seg__label{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0b6d73; margin-bottom:10px; } .mega-seg__lista{ display:flex; flex-wrap:wrap; gap:8px } .mega-seg__lista a{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; border:1px solid #dbe8ee; background:#fff; font-size:.8rem; font-weight:600; color:#1a2340; text-decoration:none; transition:background .16s ease, border-color .16s ease; } .mega-seg__lista a:hover{ background:#f2fafb; border-color:#24cdd5 } /* ════════════════════════════════════════════════════════════ 3 · RECURSOS (mega-recursos · claro + escuro) ════════════════════════════════════════════════════════════ */ .mega-label{ font-size:.72rem !important; letter-spacing:.1em !important; font-weight:800 !important; } /* Na coluna clara o ciano da marca dá 1,95:1 sobre o branco — ilegível. Na escura o MESMO ciano dá 8,67:1 e continua sendo o certo. */ .mega-recursos__col .mega-label{ color:#0b6d73 !important } .mega-recursos__col--dark .mega-label{ color:#24cdd5 !important } .mega-item{ padding:8px 10px; margin:-8px -10px; border-radius:10px; transition:background .16s ease; } .mega-recursos__col .mega-item:hover{ background:#f2fafb } .mega-recursos__col--dark .mega-item:hover{ background:rgba(255,255,255,.06) } .mega-items-grid{ gap:20px 16px !important } .mega-item strong{ font-size:.875rem !important; /* 14px */ font-weight:600 !important; color:#1a2340 !important; margin-bottom:2px !important; } .mega-item--dark strong{ color:#fff !important } .mega-item span{ font-size:.8rem !important; /* 13px */ line-height:1.45 !important; color:#5b7387 !important; } .mega-item--dark span{ color:rgba(255,255,255,.7) !important }