declara data-theme="dark" ou "light", e o JS copia isso para o menu. Quando entrarmos numa seção de fundo claro, o menu inverte sem precisar de retrabalho. ============================================================ */ /* --- Barra de progresso -------------------------------------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; background: transparent; } .progress__bar { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* --- Menu inferior -------------------------------------------- */ .nav { position: fixed; bottom: var(--nav-bottom); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem; border-radius: 999px; /* Glassmorphism */ background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--glass-fg); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); max-width: calc(100vw - 2rem); } /* Navegador sem suporte a backdrop-filter: cai para opaco. Sem isso o menu vira um retângulo semitransparente ilegível. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: var(--glass-solid, rgba(17, 17, 17, 0.92)) } } .nav__item { position: relative; padding: 0.6rem 1.1rem; border-radius: 999px; font-size: var(--t-ui); font-weight: 500; letter-spacing: 0.04em; color: var(--glass-mute); white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav__item:hover { color: var(--glass-fg) } .nav__item[aria-current="true"] { color: var(--ink); background: var(--accent); } /* Número do atalho de teclado */ .nav__key { display: inline-block; margin-right: 0.5rem; opacity: 0.5; font-variant-numeric: tabular-nums; } /* --- Temas do vidro ------------------------------------------- Trocados por JS via atributo data-nav-theme no . ------------------------------------------------------------- */ body[data-nav-theme="dark"] { --glass-bg: rgba(17, 17, 17, 0.55); --glass-border: rgba(248, 247, 242, 0.14); --glass-fg: var(--bone); --glass-mute: rgba(248, 247, 242, 0.55); --glass-solid: rgba(17, 17, 17, 0.92); } body[data-nav-theme="light"] { --glass-bg: rgba(248, 247, 242, 0.62); --glass-border: rgba(17, 17, 17, 0.12); --glass-fg: var(--ink); --glass-mute: rgba(17, 17, 17, 0.55); --glass-solid: rgba(248, 247, 242, 0.94); } /* --- Monitor baixo: menu mais compacto ------------------------ */ @media (max-height: 800px) { .nav__item { padding: 0.45rem 0.85rem } } /* --- Mobile --------------------------------------------------- O menu vira uma faixa rolável horizontalmente. Continua centralizado, mas não quebra nem espreme os rótulos. ------------------------------------------------------------- */ @media (max-width: 768px) { .nav { left: 0.75rem; right: 0.75rem; transform: none; max-width: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .nav::-webkit-scrollbar { display: none } .nav__item { padding: 0.55rem 0.9rem } .nav__key { display: none } } /* ============================================================ SUBITENS Paradas dentro de uma seção. Hoje só a Oferta tem duas. Ficam escondidos até a seção-mãe ficar ativa: oito itens já ocupam a barra, e dez o tempo todo passariam do quadro. ============================================================ */ .nav__subs { display: inline-flex; align-items: center; gap: 4px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } .nav__subs.is-on { max-width: 260px; opacity: 1; } .nav__sub { flex: 0 0 auto; padding: 5px 12px; border: 1px solid rgba(140, 255, 0, .30); border-radius: 999px; background: transparent; color: var(--fg-mute); font: inherit; font-size: 12px; font-weight: 400; white-space: nowrap; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .nav__sub:hover { color: var(--fg); border-color: rgba(140, 255, 0, .65); } /* Selecionado: a mesma pílula lime do item principal ativo, para o closer ver de relance em qual caminho a câmera está. */ .nav__sub.is-sel { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 500; } @media (max-width: 768px) { .nav__subs.is-on { max-width: 190px } .nav__sub { padding: 4px 9px; font-size: 11px } }