/* ============================================================ fpv-header.css — header do site no estilo BYDJI (bydji.com) Referência capturada ao vivo em bydji/live/ (NÃO versionada, ignorada em .gitignore). Tokens extraídos do CSS deles (tema UeeShop "ly_header_73") — ver tabela no report da tarefa. Conteúdo (logo, links, busca, selos) é 100% FPVSHOP; copiamos apenas cores/fontes/medidas/estilo, nunca marca/textos deles. Escopado com .fpv-header / .fpv-header-nav / .fpv-header-shell (classes adicionadas ao HTML existente) para não vazar para o resto da página (destaque, rodapé etc. ficam intocados). ============================================================ */ @font-face { font-family: "FPVHeaderSans"; src: url("fonts/opensans-bold.woff2") format("woff2"), url("fonts/opensans-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* -- paleta extraída do header BYDJI (tema UeeShop ly_header_73) — valores do MODO CLARO, intocados desde a task 10 -- */ --fpv-h-bg: #FFFFFF; /* --ThemesHeaderBgColor */ --fpv-h-text: #000000; /* --ThemesHeaderTextColor / HeaderIconColor */ --fpv-h-tip: #FF5555; /* --ThemesHeaderTipsColor (badge do carrinho) */ --fpv-h-input-border: #000000; /* --ThemesHeaderInputBorderColor */ --fpv-h-input-bg: #FFFFFF; /* --ThemesHeaderInputBgColor */ --fpv-h-searchbtn-bg: #000000; /* --ThemesHeaderIconSearchBgColor */ --fpv-h-searchbtn-fg: #FFFFFF; /* --ThemesHeaderIconSearchColor */ --fpv-h-cat-bg: #000000; /* --ThemesHeaderProductsCategoryColor ("TODAS AS CATEGORIAS") */ --fpv-h-cat-fg: #FFFFFF; --fpv-h-board-bg: #F5F5F5; /* --ThemesBoardBgColor (faixa de aviso/selos) */ --fpv-h-board-fg: #404852; /* --ThemesBoardColor */ --fpv-h-placeholder: #888888; /* --ThemesSearchPlaceholderTipsText */ --fpv-h-font: "FPVHeaderSans", "Segoe UI", Arial, sans-serif; /* --ThemesNavFont: OpenSans-Bold */ --fpv-h-border: rgba(0, 0, 0, 0.08); --fpv-h-shadow: 0 0 10px rgba(0, 0, 0, 0.08); /* painéis de dropdown (task 16b: CATEGORIAS/MARCAS) — dormente desde a task 18 (fpv-menu.js não monta mais nenhum dropdown, só os links diretos DRONES/RÁDIOS), mantido caso um dropdown volte a existir */ --fpv-h-menu-panel-bg: #FFFFFF; --fpv-h-menu-panel-text: #101114; --fpv-h-menu-panel-hover-bg: #F5F5F5; --fpv-h-menu-panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.16); /* painel empilhado do menu mobile */ --fpv-h-mobile-border: rgba(0, 0, 0, 0.08); --fpv-h-mobile-shadow: 0 12px 20px rgba(0, 0, 0, 0.08); --fpv-h-mobile-hover-bg: #F5F5F5; } /* ---------- MODO ESCURO: acompanha o alternador de tema do site (.joog-dark no , ver script inline em index.html/produto.html/ lista.html). A BYDJI (referência da task 10) não tem tema escuro próprio, então esta paleta foi harmonizada com o resto do dark mode já existente no site — não é extraída da referência: - fundo/superfície: #1A1D22, a mesma "elevação" já usada pelos cards de produto no dark (#fpv-produtos .joog-dark .fpv-card) e pelo item de busca selecionado antes da task 10; - texto: #E8EAED, o mesmo tom usado em .fpv-hero-content/.fpv-btn-ghost; - acento: mantém o laranja de marca #FF6B00 (já é a `--heroui-primary` do dark mode em fpv-theme.css) para a pílula de categorias, no lugar do preto (que teria pouquíssimo contraste sobre um header já escuro). Todo o resto (texto de menu, ícones, badge do carrinho, selos) deriva das MESMAS regras do modo claro porque elas já leem as variáveis --fpv-h-*; só os valores mudam aqui. */ .joog-dark { --fpv-h-bg: #1A1D22; --fpv-h-text: #E8EAED; --fpv-h-tip: #FF5555; --fpv-h-input-border: #33373F; --fpv-h-input-bg: #1A1D22; --fpv-h-searchbtn-bg: #FF6B00; --fpv-h-searchbtn-fg: #101114; --fpv-h-cat-bg: #FF6B00; --fpv-h-cat-fg: #101114; --fpv-h-board-bg: #1A1D22; --fpv-h-board-fg: #E8EAED; --fpv-h-placeholder: #9AA0A6; --fpv-h-border: rgba(255, 255, 255, 0.08); --fpv-h-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); --fpv-h-menu-panel-bg: #1A1D22; --fpv-h-menu-panel-text: #E8EAED; --fpv-h-menu-panel-hover-bg: #26292F; --fpv-h-menu-panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); --fpv-h-mobile-border: rgba(255, 255, 255, 0.08); --fpv-h-mobile-shadow: 0 12px 20px rgba(0, 0, 0, 0.5); --fpv-h-mobile-hover-bg: #26292F; } /* ---------- moldura do header: acompanha --fpv-h-bg (claro por padrão, grafite escuro sob .joog-dark — ver bloco acima). Os `!important` que existiam aqui até a task 10 foram removidos: eles só precisavam vencer utilitários Tailwind (`bg-primary`, `bg-background`, `rounded-t-2xl`, `backdrop-blur-lg`) que têm a MESMA especificidade (uma classe) que estas regras — e como assets/fpv-header.css é carregado DEPOIS do CSS do Tailwind no (ver index.html/produto.html/lista.html), a ordem de cascata já basta para vencer, sem precisar de !important. Isso também é o que permite `.joog-dark` (duas classes, mais específico) vencer de forma "natural" caso algum dia haja uma regra clara com !important novamente. */ .fpv-header-shell { background-color: var(--fpv-h-bg); } .fpv-header-nav { background-color: var(--fpv-h-bg); border-radius: 0; box-shadow: var(--fpv-h-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; } .fpv-header { color: var(--fpv-h-text); } /* ---------- logo: variante colorida/transparente no claro (BYDJI é claro, contrasta bem); no escuro, mesmo truque do rodapé (filter:brightness(0) invert(1)) — o "FPV" da logo é escuro e some num header grafite, então force branco sólido, igual ao rodapé. ---------- */ .fpv-header .fpv-logo-a img { content: url("img/logofpvshop-tp.png"); } .joog-dark .fpv-header .fpv-logo-a img { filter: brightness(0) invert(1); } /* ---------- links de navegação ---------- */ .fpv-nav-links li, .fpv-nav-links li p, .fpv-nav-links li a { font-family: var(--fpv-h-font); font-weight: 700; font-size: 14px; color: var(--fpv-h-text); } .fpv-nav-links li a:hover { text-decoration: underline; text-underline-offset: 3px; } /* "Departamentos" no papel do botão preto "TODAS AS CATEGORIAS" do BYDJI (NOTA: fpv-menu.js remove esse item do DOM ao montar DRONES/RÁDIOS — a regra fica como fallback caso o JS falhe/atrase. Especificidade: usamos o seletor completo `.fpv-nav-links li p.fpv-nav-cat` — mais específico que `.fpv-nav-links li p` logo abaixo — em vez de !important, para a cor da pílula vencer sem depender de brutalidade de cascata. */ .fpv-nav-links li p.fpv-nav-cat { display: inline-flex; align-items: center; background-color: var(--fpv-h-cat-bg); color: var(--fpv-h-cat-fg); padding: 8px 18px; border-radius: 4px; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .fpv-nav-links li p.fpv-nav-cat:hover { opacity: 0.82; } /* ---------- ícones (busca / perfil / carrinho / tema) ---------- */ .fpv-nav-icons svg { color: var(--fpv-h-text); } .fpv-nav-icons button, .fpv-nav-icons a[data-cy="cart-button"] { color: var(--fpv-h-text); } /* badge do carrinho: círculo vermelho com anel na cor do header (branco no claro, grafite no escuro — assim o anel sempre "recorta" contra o fundo do header em vez de destoar), como o .cart_count do BYDJI (bg TipsColor, borda 2px na cor do fundo). Sem !important: o atributo `[data-cy="cart-badge"]` empata em especificidade com as classes Tailwind (`bg-primary` etc.) do mesmo elemento, e como fpv-header.css carrega depois do CSS do Tailwind a ordem de cascata já resolve. */ .fpv-header [data-cy="cart-badge"] { background-color: var(--fpv-h-tip); color: #fff; border: 2px solid var(--fpv-h-bg); } /* hambúrguer mobile: barras pretas */ .fpv-header [data-cy="menu-button"] span { color: var(--fpv-h-text); } /* ---------- faixa de selos (mobile, carrossel dentro do header) ---------- equivalente ao .ly_header_top (BoardBgColor claro / BoardColor escuro) do tema BYDJI — troca o laranja da marca por essa faixa neutra só aqui, mantendo o restante da identidade FPVSHOP intocado. */ .fpv-header-mobilebar { background-color: var(--fpv-h-board-bg); color: var(--fpv-h-board-fg); } .fpv-header-mobilebar p { font-family: var(--fpv-h-font); font-weight: 700; } /* faixa de selos desktop (perto da grade de produtos) — mesma linguagem tipográfica do header, mantendo o fundo claro que já tinha (bg-default-100). A COR do texto já acompanha o tema (var --fpv-h-board-fg), mas o FUNDO (`bg-default-100`, utilitário do HeroUI) não: aquele componente lê `--heroui-default-100`, variável que só o HeroUI troca sob a classe `.dark`/`[data-theme=dark]` — e o alternador de tema do site nunca aplica essa classe (só `.joog-light`/`.joog-dark`). Corrigido aqui, restrito a este elemento (não é escopo desta tarefa arrumar `--heroui-default*` globalmente). Vence `.bg-default-100` por especificidade (duas classes/atributo vs. uma), sem precisar de !important. */ [data-cy="benefits-bar-desktop"] p.font-semibold { font-family: var(--fpv-h-font); font-weight: 700; color: var(--fpv-h-board-fg); } .joog-dark [data-cy="benefits-bar-desktop"] { background-color: var(--fpv-h-board-bg); } @media (min-width: 640px) { .fpv-nav-links li p.fpv-nav-cat { font-size: 14px; padding: 9px 22px; } } /* ============================================================ task 16b — menu de navegação: CATEGORIAS / MARCAS (dropdowns) e DRONES / RÁDIOS (links diretos), montados em runtime por fpv-menu.js dentro de .fpv-nav-links (substituem os links mortos do template, que apontavam para fpvshop.com.br). task 18 (pivô comercial: loja passa a vender só drones e rádios) — fpv-menu.js SIMPLIFICOU o menu: os dropdowns CATEGORIAS/MARCAS foram removidos, ficam só os links diretos DRONES/RÁDIOS. As regras de .fpv-menu-trigger/.fpv-menu-caret/.fpv-menu-panel abaixo ficam DORMENTES (nada no site atual as usa, mas não foram removidas — mesmo espírito de "não apagar o que pode voltar a ser útil" aplicado ao backend/páginas de categorias-marcas). O header BYDJI de referência é sempre claro; nosso site, porém, tem alternador de tema — então (task "header com suporte a dark mode") o menu e o painel mobile leem as mesmas variáveis --fpv-h-* definidas no topo deste arquivo, que mudam de valor sob .joog-dark. Nenhuma cor aqui é mais fixa em hex. ============================================================ */ .fpv-menu-item { position: relative; height: 100%; display: flex; align-items: center; } .fpv-menu-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--fpv-h-font); font-weight: 700; font-size: 14px; color: var(--fpv-h-text); } .fpv-nav-links .fpv-menu-item > a { font-family: var(--fpv-h-font); font-weight: 700; font-size: 14px; color: var(--fpv-h-text); text-decoration: none; } .fpv-nav-links .fpv-menu-item > a:hover, .fpv-menu-trigger:hover { text-decoration: underline; text-underline-offset: 3px; } /* caret desenhado em CSS (sem imagem/ícone externo) */ .fpv-menu-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.15s ease; } .fpv-menu-item:hover .fpv-menu-caret, .fpv-menu-item:focus-within .fpv-menu-caret, .fpv-menu-item.is-open .fpv-menu-caret { transform: rotate(180deg); } /* painel do dropdown: branco, com sombra — escondido por padrão, revelado por hover, foco (teclado) OU clique (.is-open, tocado via fpv-menu.js — necessário em telas touch, que não têm :hover). */ .fpv-menu-panel { display: none; position: absolute; top: 100%; left: 0; margin-top: 0; padding-top: 10px; /* ponte invisível — hover não "cai" entre o gatilho e o painel */ } .fpv-menu-item:hover .fpv-menu-panel, .fpv-menu-item:focus-within .fpv-menu-panel, .fpv-menu-item.is-open .fpv-menu-panel { display: block; } .fpv-menu-panel ul { list-style: none; margin: 0; padding: 8px 0; min-width: 220px; max-height: 60vh; overflow-y: auto; background: var(--fpv-h-menu-panel-bg); border-radius: 8px; box-shadow: var(--fpv-h-menu-panel-shadow); } .fpv-menu-panel a { display: block; padding: 8px 18px; font-family: var(--fpv-h-font); font-size: 13px; font-weight: 600; color: var(--fpv-h-menu-panel-text); text-decoration: none; white-space: nowrap; } .fpv-menu-panel a:hover { background: var(--fpv-h-menu-panel-hover-bg); color: #FF6B00; } /* ---------- mobile: painel simples empilhado ---------- O template não trazia um drawer mobile funcional — o botão "Abrir menu" ([data-cy="menu-button"]) só tinha o ícone hamburguer/X (via classes `group-data-[open=true]:...`), sem handler algum. Reconstruir a integração completa do HeroUI (`data-[menu-open=true]`) ficou fora do escopo da tarefa 16b — o spec permite explicitamente uma lista simples empilhada como fallback aceitável, então fpv-menu.js abre este painel (sem dropdowns aninhados) ao clicar no mesmo botão. */ .fpv-menu-mobile { display: flex; flex-direction: column; width: 100%; background: var(--fpv-h-bg); border-top: 1px solid var(--fpv-h-mobile-border); box-shadow: var(--fpv-h-mobile-shadow); padding: 10px 0 16px; } .fpv-menu-mobile[hidden] { display: none !important; } .fpv-menu-mobile-quick { display: flex; gap: 10px; padding: 4px 20px 10px; } .fpv-menu-mobile-quick a { flex: 1; text-align: center; background: var(--fpv-h-cat-bg); color: var(--fpv-h-cat-fg); border-radius: 4px; padding: 8px 0; font-family: var(--fpv-h-font); font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; } .fpv-menu-mobile-h { margin: 12px 20px 4px; font-family: var(--fpv-h-font); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #999; } .fpv-menu-mobile a { padding: 8px 20px; font-family: var(--fpv-h-font); font-size: 13px; font-weight: 600; color: var(--fpv-h-text); text-decoration: none; } .fpv-menu-mobile a:hover { background: var(--fpv-h-mobile-hover-bg); } @media (min-width: 1024px) { .fpv-menu-mobile { display: none !important; } } /* Gap entre os itens do menu principal */ .fpv-nav-links { display: flex; align-items: center; gap: 2rem; }