/* ============================================= DecodeGear V8 — Layout Header, mobile drawer, footer, grids de página. ============================================= */ /* ---- Header shell ---- */ .dg-header { position: sticky; top: 0; z-index: 100; background: var(--dg-bg); border-bottom: var(--dg-border-w) solid var(--dg-border); } .dg-header__bar { display: flex; align-items: center; gap: var(--dg-space-5); padding-block: var(--dg-space-3); /* compacto — nunca consome grande parte da 1a viewport (42-design-principles.md #4) */ } /* BUGFIX (QA-0B, BUG-QA0-001): em ~360px, logo + os 3 botões de ação (busca, tema, hambúrguer) não cabem com gap de 24px (--dg-space-5) — o flex não encolhe (min-width:auto do texto da logo, largura fixa dos botões) nem quebra linha, então .dg-header__actions estourava a viewport em 8-24px (variando por fonte real vs fallback). Isolado via injeção runtime: NÃO era o drawer (testado display/transform/visibility — zero efeito); era literalmente o header. gap:0 é o valor mínimo que zera o overflow de verdade após as fontes carregarem (--dg-space-1/4px ainda deixava ~4px — confirmado só depois de esperar 'networkidle', o teste rápido inicial mascarou isso). Os botões de 44px já têm respiro próprio, visualmente não fica colado. Só afeta a faixa estreita onde não cabia (>=400px já cabia com o gap original). */ @media (max-width: 399px) { .dg-header__bar { gap: 0; } } .dg-header__logo { display: flex; align-items: center; gap: var(--dg-space-2); text-decoration: none; flex-shrink: 0; } /* BUGFIX (Etapa 4C, achado visualmente em light mode): style.css legado fixa .site-logo__text em #fff (branco), assumindo um header sempre escuro — o V8 introduziu o toggle de tema, e no light mode o "Decode" ficava branco sobre fundo branco (ilegível). Usa o token semântico de texto para acompanhar o tema. */ .dg-header__logo .site-logo__text { color: var(--dg-text); } .dg-header__nav { display: none; gap: var(--dg-space-5); margin-left: var(--dg-space-5); flex: 1; } @media (min-width: 960px) { .dg-header__nav { display: flex; } } .dg-header__nav a { color: var(--dg-text); text-decoration: none; font-weight: 600; font-size: var(--dg-text-sm); white-space: nowrap; } .dg-header__nav a:hover { color: var(--dg-accent); } .dg-header__search--desktop { display: none; flex: 1; max-width: 320px; margin-left: auto; } /* BUGFIX (QA-0B, BUG-QA0-002): mesma causa do hambúrguer no hotfix 5.0.3 — esta regra de "mostrar em >=960px" precisa vir DEPOIS da regra base acima, porque as duas têm especificidade igual e a última no arquivo vence a cascata. */ @media (min-width: 960px) { .dg-header__search--desktop { display: block; } } .dg-header__actions { display: flex; align-items: center; gap: var(--dg-space-3); margin-left: var(--dg-space-3); } .dg-header__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--dg-text); } @media (min-width: 960px) { .dg-header__search-toggle { display: none; } } .dg-header__search--mobile { max-height: 0; overflow: hidden; transition: max-height .2s ease; border-bottom: var(--dg-border-w) solid transparent; } .dg-header__search--mobile[data-open="true"] { max-height: 80px; border-bottom-color: var(--dg-border); } .dg-header__search--mobile form { display: flex; gap: var(--dg-space-2); padding-block: var(--dg-space-3); } .dg-header__search--mobile input { flex: 1; } @media (min-width: 960px) { .dg-header__search--mobile { display: none; } } .dg-header__mobile-trigger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* touch target */ background: none; border: none; cursor: pointer; color: var(--dg-text); } /* BUGFIX (hotfix 5.0.3): esta regra base precisa vir DEPOIS do @media (min-width:960px) acima — como as duas regras têm especificidade igual, a última no arquivo vence a cascata. Antes, o hide-no-desktop estava declarado ANTES desta regra base, então em >=960px a base (sempre visível) vencia e o hambúrguer nunca sumia ao lado da nav desktop. */ @media (min-width: 960px) { .dg-header__mobile-trigger { display: none; } } /* ---- Mobile drawer ---- */ .dg-drawer { position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); height: 100dvh; background: var(--dg-surface-elevated); border-left: var(--dg-border-w) solid var(--dg-border); transform: translateX(100%); transition: transform .25s ease; z-index: 200; overflow-y: auto; display: flex; flex-direction: column; } .dg-drawer[data-open="true"] { transform: translateX(0); } .dg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--dg-space-4); border-bottom: var(--dg-border-w) solid var(--dg-border); } .dg-drawer__close { width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--dg-text); font-size: var(--dg-text-xl); } .dg-drawer__search { padding: var(--dg-space-4); border-bottom: var(--dg-border-w) solid var(--dg-border); } .dg-drawer__section { padding: var(--dg-space-4); border-bottom: var(--dg-border-w) solid var(--dg-border); } .dg-drawer__section-title { font-size: var(--dg-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--dg-text-muted); margin-bottom: var(--dg-space-3); } .dg-drawer__section ul { list-style: none; padding: 0; margin: 0; } .dg-drawer__section li { margin-bottom: 0; } .dg-drawer__section a { display: block; padding: var(--dg-space-3) 0; min-height: 44px; color: var(--dg-text); text-decoration: none; font-weight: 600; } .dg-drawer__section a:hover { color: var(--dg-accent); } .dg-drawer-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .dg-drawer-backdrop[data-visible="true"] { opacity: 1; pointer-events: auto; } @media (min-width: 960px) { .dg-drawer, .dg-drawer-backdrop { display: none; } } /* ---- Footer ---- NOTA (Etapa 4C): a classe .dg-footer abaixo não é aplicada em nenhum lugar do footer.php hoje (o