/** * ShopTop Design System — Cabeçalho * ------------------------------------------------------------------ * Layout do cabeçalho principal (logo, busca, conta, carrinho, menu * de categorias). Depende dos tokens/variáveis/botões/utilitários já * carregados antes deste arquivo (ver functions.php). * * Mobile-first: por padrão a busca e o menu ficam escondidos atrás * de um botão (ícone); em telas >=768px eles ficam sempre visíveis. * * Depende de: tokens.css, variables.css, utilities.css */ .shoptop-header { background-color: var(--shoptop-color-bg); border-bottom: 1px solid var(--shoptop-color-border); } /* Sprint F: header um pouco mais alto/arejado (referência: Amazon, * Mercado Livre, Magalu, Kabum) — era padding-block:8px só. */ .shoptop-header__bar { align-items: center; gap: var(--shoptop-space-3); padding-block: var(--shoptop-space-3); min-height: 64px; } .shoptop-header__brand { align-items: center; gap: var(--shoptop-space-2); flex-shrink: 0; } /* Correção definitiva do tamanho da logomarca (substitui as tentativas * anteriores — Sprint F max-height / correção por breakpoint solta). * * Container FIXO ao redor do bloco `wp:site-logo` (preservado intacto * em patterns/header-shoptop.php — nenhum atributo/markup alterado): * 120x48px no celular (mobile-first), 160x64px a partir do desktop * (breakpoint oficial lg:1024px, ver responsive.css). A imagem dentro * nunca ultrapassa o container (`max-width`/`max-height:100%`), nunca * distorce (`width`/`height:auto` + `object-fit:contain`) e nunca * sobrepõe busca/conta/carrinho ao lado (container tem tamanho * previsível, `.shoptop-header__brand` continua `flex-shrink:0`). * Seletor escopado a `.wp-block-site-logo` DENTRO de * `.shoptop-header__brand` — nunca `img` global, não afeta nenhuma * outra imagem do site. O arquivo de imagem original nunca é alterado. * * Sem `!important`: o bloco `wp:site-logo` só grava `width`/`height` * como ATRIBUTOS HTML no `` (a partir do atributo `width` do * próprio bloco), nunca `style` inline — CSS externo já vence * atributo HTML normalmente, confirmado no HTML renderizado. */ .shoptop-header__brand .wp-block-site-logo { display: flex; align-items: center; justify-content: flex-start; width: 120px; height: 48px; flex-shrink: 0; overflow: hidden; } .shoptop-header__brand .wp-block-site-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } @media (min-width: 1024px) { .shoptop-header__brand .wp-block-site-logo { width: 160px; height: 64px; } } /* Placeholder tipográfico — só aparece enquanto NÃO há logo oficial * configurada (Personalizar > Identidade do Site). Sprint D.2: logo * oficial definida, então ".wp-custom-logo" (classe que o WordPress * já adiciona sozinho ao quando existe um custom_logo, desde * que o tema declare add_theme_support('custom-logo') — ver * functions.php) some com o texto para não duplicar a marca ao lado * da imagem. */ .shoptop-header__brand .wp-block-site-title a { font-weight: var(--shoptop-font-weight-bold); color: var(--shoptop-color-primary-700); letter-spacing: -0.02em; text-decoration: none; } body.wp-custom-logo .shoptop-header__brand .wp-block-site-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Busca -------------------------------------------------------- */ .shoptop-header__search { display: flex; align-items: center; flex: 1 1 auto; justify-content: flex-end; } .shoptop-header__search-toggle { background: none; border: none; font-size: var(--shoptop-font-size-lg); line-height: 1; padding: var(--shoptop-space-2); cursor: pointer; border-radius: var(--shoptop-radius-sm); } .shoptop-header__search-toggle:hover { background-color: var(--shoptop-color-bg-alt); } /* Escondida por padrão no mobile; abre ao clicar no ícone de lupa */ .shoptop-header__search-form { display: none; } .shoptop-header__search-form.is-open { display: block; width: 100%; margin-top: var(--shoptop-space-2); } /* Sprint F: pesquisa em destaque (formato pílula com botão preenchido, * referência Amazon/Mercado Livre) — só CSS, o formulário continua * sendo o mesmo gerado por get_product_search_form()/get_search_form() * (WooCommerce/WordPress nativos), nenhum markup novo. */ .shoptop-header__search-form form { display: flex; align-items: stretch; width: 100%; } .shoptop-header__search-form input[type="search"], .shoptop-header__search-form input.search-field { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: var(--shoptop-space-2) var(--shoptop-space-3); border: 1.5px solid var(--shoptop-color-border-strong); border-right: none; border-radius: var(--shoptop-radius-full) 0 0 var(--shoptop-radius-full); font-family: var(--shoptop-font-family-base); font-size: var(--shoptop-font-size-sm); background-color: var(--shoptop-input-bg); color: var(--shoptop-input-text); } /* Sem outline nativo (o cantos arredondados da pílula cortariam o * outline retangular do navegador) — substituído por borda + anel de * foco (box-shadow), visível o bastante para navegação por teclado. */ .shoptop-header__search-form input[type="search"]:focus-visible, .shoptop-header__search-form input.search-field:focus-visible { outline: none; border-color: var(--shoptop-color-primary-500); box-shadow: 0 0 0 3px var(--shoptop-color-primary-100); } .shoptop-header__search-form button[type="submit"], .shoptop-header__search-form input[type="submit"] { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding-inline: var(--shoptop-space-3); background-color: var(--shoptop-btn-primary-bg); color: var(--shoptop-btn-primary-text); border: 1.5px solid var(--shoptop-btn-primary-bg); border-radius: 0 var(--shoptop-radius-full) var(--shoptop-radius-full) 0; cursor: pointer; transition: background-color 0.15s ease; } .shoptop-header__search-form button[type="submit"]:hover, .shoptop-header__search-form input[type="submit"]:hover { background-color: var(--shoptop-btn-primary-bg-hover); } /* Ações (conta / carrinho / hambúrguer) ------------------------- */ .shoptop-header__actions { display: flex; align-items: center; gap: var(--shoptop-space-4); flex-shrink: 0; } /* Sprint F: Minha Conta/Carrinho em destaque — "chip" com área de toque * maior (>=44px) e fundo sutil no hover, ícone maior que o texto ao * lado (referência Amazon/Mercado Livre/Magalu). Nenhum atributo/href * muda — só aparência. */ .shoptop-header__account, .shoptop-header__cart { display: flex; align-items: center; gap: var(--shoptop-space-1); min-height: 44px; padding: var(--shoptop-space-1) var(--shoptop-space-2); border-radius: var(--shoptop-radius-md); color: var(--shoptop-color-text); text-decoration: none; font-size: var(--shoptop-font-size-sm); font-weight: var(--shoptop-font-weight-medium); transition: background-color 0.15s ease, color 0.15s ease; } .shoptop-header__account > span:first-child, .shoptop-header__cart > span:first-child { font-size: var(--shoptop-font-size-lg); } /* Visitante não autenticado: "Entrar" (mesmo .shoptop-header__account * de sempre) + "Criar conta" (link secundário, mais discreto — nunca * disputa destaque com "Entrar", que é a ação primária). Os dois vão * para a MESMA página Minha Conta, só com âncoras diferentes (ver * patterns/header-shoptop.php). */ .shoptop-header__auth { display: flex; align-items: center; gap: var(--shoptop-space-2); } .shoptop-header__criar-conta { display: flex; align-items: center; min-height: 44px; padding-inline: var(--shoptop-space-2); color: var(--shoptop-color-text-secondary); text-decoration: underline; font-size: var(--shoptop-font-size-sm); white-space: nowrap; } .shoptop-header__criar-conta:hover { color: var(--shoptop-color-link); } .shoptop-header__account:hover, .shoptop-header__cart:hover { background-color: var(--shoptop-color-bg-alt); color: var(--shoptop-color-link); } .shoptop-header__cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--shoptop-radius-full); background-color: var(--shoptop-color-primary-600); color: #FFFFFF; font-size: var(--shoptop-font-size-xs); font-weight: var(--shoptop-font-weight-semibold); box-shadow: var(--shoptop-shadow-sm); } .shoptop-header__menu-toggle { background: none; border: none; font-size: var(--shoptop-font-size-lg); cursor: pointer; padding: var(--shoptop-space-2); border-radius: var(--shoptop-radius-sm); } .shoptop-header__menu-toggle:hover { background-color: var(--shoptop-color-bg-alt); } /* Menu de categorias --------------------------------------------- */ .shoptop-header__nav { display: none; border-top: 1px solid var(--shoptop-color-border); padding: var(--shoptop-space-2) var(--shoptop-space-3); } .shoptop-header__nav.is-open { display: block; } .shoptop-header__nav-list { list-style: none; display: flex; flex-direction: column; gap: var(--shoptop-space-1); margin: 0; padding: 0; } /* Sprint F: min-height:44px — área de toque mínima recomendada (item de * menu de categorias era só ~22px de altura no mobile). */ .shoptop-header__nav-list a { display: flex; align-items: center; min-height: 44px; padding: var(--shoptop-space-1) 0; color: var(--shoptop-color-text); text-decoration: none; font-size: var(--shoptop-font-size-sm); font-weight: var(--shoptop-font-weight-medium); border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .shoptop-header__nav-list a:hover { color: var(--shoptop-color-link); border-bottom-color: var(--shoptop-color-primary-500); } /* Foco visível para navegação por teclado em todo o cabeçalho */ .shoptop-header a:focus-visible, .shoptop-header button:focus-visible { outline: 2px solid var(--shoptop-color-primary-500); outline-offset: 2px; } /* Sprint F: no mobile, o respiro extra de --actions/--account/--cart * (pensado para desktop) é reduzido — evita overflow horizontal em * telas estreitas (ex.: 320-360px), mantendo a área de toque mínima * de 44px (só o padding encolhe, não o min-height). */ @media (max-width: 767px) { .shoptop-header__actions { gap: var(--shoptop-space-2); } .shoptop-header__account, .shoptop-header__cart { padding: var(--shoptop-space-1); } } /* Desktop (>=768px): busca e menu sempre visíveis, ícones somem --- */ @media (min-width: 768px) { .shoptop-header__search-form { display: block; max-width: 420px; } .shoptop-header__nav { display: block; border-top: none; padding-block: var(--shoptop-space-2); } .shoptop-header__nav-list { flex-direction: row; gap: var(--shoptop-space-4); } }