/* ========================================================================== Banner "Agosto, o mês da nutri" — TEMPORÁRIO -------------------------------------------------------------------------- Sai do ar em 01/09/2026. Para remover: reverter o commit que criou este arquivo (`git revert `). Nada mais no site depende dele. Duas peças: .ba → faixa marfim fixa no topo (todas as páginas com a marcação) .ba-block → bloco marfim antes da seção de planos (só a home) A faixa é `position: fixed`, então o `` da página recebe a classe `ba-on` para ganhar um respiro de topo e os cabeçalhos fixos/sticky descem a mesma altura. Sem isso a faixa cobriria o menu. ========================================================================== */ :root { --ba-h: 46px; /* altura da faixa no desktop */ --ba-paper-1: #F6F1E7; /* marfim claro */ --ba-paper-2: #EFE7D8; /* marfim médio */ --ba-paper-3: #E9DFCB; /* areia */ --ba-ink: #16140F; /* tinta */ --ba-ink-soft: #4A453C; --ba-bronze: #8A6614; /* rótulo e fio — contraste 4,7:1 sobre o marfim */ --ba-meta: #6B6357; /* etiquetas "no ar"/"em agosto" — 4,8:1 */ } /* ========================================================================== 1. FAIXA DO TOPO ========================================================================== */ .ba { position: fixed; top: 0; left: 0; right: 0; z-index: 60; /* acima do header do site (z-50 na home) */ min-height: var(--ba-h); display: flex; align-items: center; background: linear-gradient(92deg, var(--ba-paper-1) 0%, var(--ba-paper-2) 60%, var(--ba-paper-3) 100%); border-bottom: 1px solid rgba(22, 20, 15, .16); /* relevo pra faixa se destacar também nas páginas de fundo creme (/suporte/ e /recem-formados/), onde o marfim quase encosta na cor delas */ box-shadow: 0 6px 16px rgba(0, 12, 30, .10); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ba-ink); } .ba__link { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 48px 9px 22px; text-decoration: none; color: inherit; font-size: 14.5px; line-height: 1.3; } .ba__label { display: flex; align-items: center; gap: 11px; flex-shrink: 0; font-size: 13.5px; font-weight: 500; color: var(--ba-bronze); white-space: nowrap; } .ba__label::after { content: ""; width: 26px; height: 1px; background: rgba(138, 102, 20, .4); } .ba__msg b { font-weight: 700; } .ba__cta { flex-shrink: 0; background: var(--ba-ink); color: var(--ba-paper-1); font-size: 13px; font-weight: 650; padding: 8px 18px; border-radius: 999px; white-space: nowrap; transition: background .2s ease; } .ba__link:hover .ba__cta { background: #35301F; } /* versão curta — só aparece no celular */ .ba__short { display: none; } .ba__arw { color: var(--ba-bronze); font-weight: 700; } /* -------------------------------------------------------------------------- VARIANTE ESCURA — para as páginas de fundo claro -------------------------------------------------------------------------- O marfim só chama atenção sobre fundo escuro. Nas páginas claras (/estudantes/, /recem-formados/, /suporte/, /preco-numax/) ele encostava na cor da própria página e sumia. Ali a faixa inverte: obsidiana com o MESMO dourado, então as duas versões continuam lendo como uma campanha só. -------------------------------------------------------------------------- */ .ba--escura { background: linear-gradient(92deg, #0B0B0D 0%, #16151A 55%, #0B0B0D 100%); border-bottom: 1px solid rgba(229, 193, 115, .42); box-shadow: inset 0 1px 0 rgba(229, 193, 115, .16), 0 6px 18px rgba(0, 0, 0, .22); color: #EFEAE0; } .ba--escura .ba__label { color: #E5C173; } .ba--escura .ba__label::after { background: rgba(229, 193, 115, .45); } .ba--escura .ba__msg b { color: #FFF5E2; } .ba--escura .ba__cta { background: linear-gradient(96deg, #E5C173, #C9A24C); color: #14120C; } .ba--escura .ba__link:hover .ba__cta, .ba--escura .ba__link:focus-visible .ba__cta { background: linear-gradient(96deg, #F0D394, #D9B45C); } .ba--escura .ba__x { color: rgba(239, 234, 224, .45); } .ba--escura .ba__x:hover { color: #EFEAE0; } .ba--escura .ba__arw { color: #E5C173; } .ba--escura .ba__x:focus-visible, .ba--escura .ba__link:focus-visible { outline-color: #E5C173; } /* botão de fechar: alvo de toque ocupando a altura toda no canto */ .ba__x { position: absolute; right: 0; top: 0; width: 44px; height: 100%; min-height: var(--ba-h); display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: rgba(22, 20, 15, .45); font-size: 17px; line-height: 1; cursor: pointer; transition: color .2s ease; } .ba__x:hover { color: var(--ba-ink); } .ba__x:focus-visible, .ba__link:focus-visible { outline: 2px solid var(--ba-ink); outline-offset: -3px; } /* --- celular: uma linha só, faixa inteira clicável --- */ @media (max-width: 860px) { :root { --ba-h: 38px; } .ba__link { justify-content: flex-start; gap: 8px; padding: 7px 44px 7px 14px; font-size: 13px; } .ba__label, .ba__msg, .ba__cta { display: none; } .ba__short { display: inline; } } /* ========================================================================== 2. RESPIRO DO TOPO — enquanto a faixa existir ========================================================================== */ body.ba-on { padding-top: var(--ba-h); } /* cabeçalho fixo padrão (home, estudantes, numaxpay, suporte, recém-formados…) */ body.ba-on > header.fixed, body.ba-on > header[class*="fixed"] { top: var(--ba-h); } /* cabeçalho flutuante das páginas institucionais (site-header.css: top 18px) */ body.ba-on .site-header { top: calc(var(--ba-h) + 18px); } /* cabeçalho sticky da página de atualizações */ body.ba-on .upd-header { top: var(--ba-h); } /* Ao clicar em "Planos", o navegador pula pra seção. Como a faixa empurrou a página pra baixo, o pulo passaria a parar 40px mais alto do que antes — isto devolve exatamente essa diferença. */ body.ba-on #planos { scroll-margin-top: var(--ba-h); } /* -------------------------------------------------------------------------- Desligamento: a classe `ba-hide` no apaga as duas peças e devolve o layout original. Ela é aplicada em dois casos, por um script de 1 linha que roda ANTES da página desenhar (por isso não pisca): 1. a nutri já fechou a faixa antes (guardado no navegador dela) 2. a data passou de 01/09/2026 — o banner some sozinho -------------------------------------------------------------------------- */ html.ba-hide .ba, html.ba-hide .ba-block-wrap { display: none; } html.ba-hide body.ba-on { padding-top: 0; } html.ba-hide body.ba-on > header.fixed, html.ba-hide body.ba-on > header[class*="fixed"] { top: 0; } html.ba-hide body.ba-on .site-header { top: 18px; } html.ba-hide body.ba-on .upd-header { top: 0; } /* ========================================================================== 3. BLOCO DA HOME (antes da seção de planos) ========================================================================== */ /* O bloco vive DENTRO da seção de planos (primeiro elemento dela). Assim não existe emenda de cor entre seções nem vão morto embaixo dele — ele se apoia no mesmo fundo dos planos e o título "Escolha o plano do seu momento" vem logo em seguida. */ .ba-block-wrap { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto 56px; scroll-margin-top: calc(var(--ba-h) + 84px); } .ba-block { padding: 38px 40px; border-radius: 20px; background: linear-gradient(158deg, var(--ba-paper-1) 0%, var(--ba-paper-2) 100%); border: 1px solid rgba(22, 20, 15, .10); box-shadow: 0 26px 60px rgba(0, 10, 30, .45); display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .ba-block__label { display: flex; align-items: center; gap: 12px; } .ba-block__label > span { font-size: 15px; font-weight: 500; color: var(--ba-bronze); white-space: nowrap; } .ba-block__label::after { content: ""; flex: 1; height: 1px; background: rgba(138, 102, 20, .32); } .ba-block__title { margin: 16px 0 12px; font-size: 32px; line-height: 1.2; font-weight: 750; letter-spacing: -.032em; color: var(--ba-ink); } .ba-block__title em { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 600; color: var(--ba-bronze); } .ba-block__text { font-size: 16.5px; line-height: 1.55; color: var(--ba-ink-soft); max-width: 46ch; } /* link discreto pro histórico completo — texto, não botão */ .ba-block__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--ba-bronze); text-decoration: none; border-bottom: 1px solid rgba(138, 102, 20, .38); padding-bottom: 2px; transition: border-color .2s ease; } .ba-block__more:hover { border-bottom-color: var(--ba-bronze); } .ba-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ba-block__item { display: flex; align-items: center; gap: 12px; background: rgba(22, 20, 15, .045); border: 1px solid rgba(22, 20, 15, .10); border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.3; color: #2B2721; } .ba-block__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ba-block__dot--live { background: #46C08A; box-shadow: 0 0 0 3px rgba(70, 192, 138, .18); } .ba-block__dot--soon { background: #C9A24C; box-shadow: 0 0 0 3px rgba(201, 162, 76, .16); } .ba-block__state { margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ba-meta); } /* --- celular: lista com fios em vez de caixas, texto mais curto --- */ @media (max-width: 860px) { .ba-block-wrap { padding: 0 16px; } .ba-block { grid-template-columns: 1fr; gap: 0; padding: 22px 20px 8px; border-radius: 16px; } .ba-block__label > span { font-size: 13px; } .ba-block__title { margin: 12px 0 8px; font-size: 21px; } .ba-block__text { font-size: 14px; } .ba-block__list { gap: 0; margin-top: 16px; } .ba-block__item { background: transparent; border: 0; border-top: 1px solid rgba(22, 20, 15, .09); border-radius: 0; padding: 11px 0; font-size: 13px; } .ba-block__state { font-size: 9.5px; } } /* o texto longo do parágrafo só no desktop; o curto só no celular */ .ba-block__text--short { display: none; } @media (max-width: 860px) { .ba-block__text--long { display: none; } .ba-block__text--short { display: block; } } /* nomes longos das novidades no desktop, curtos no celular */ .ba-block__item .short { display: none; } @media (max-width: 860px) { .ba-block__item .long { display: none; } .ba-block__item .short { display: inline; } } @media (prefers-reduced-motion: reduce) { .ba__cta, .ba__x { transition: none; } }