Navegação
O cabeçalho copia o tema da seção que passa por baixo e some quando a pessoa rola para ler. Logo à esquerda, links e conversão juntos à direita. Abas e índice usam marcadores que deslizam; nada de etiqueta.
Cabeçalho
Três estados em data-estado: topo, rolado (fundo do tema e filete) e oculto (rolando para baixo). O módulo copia o data-tema da seção sob ele. "Serviços" abre o mega-painel; abaixo de 1024 px o menu vira uma folha com links grandes. Role dentro da demo.
Com mega-painel
.rq-cabecalho · __nav · __link · __painel · __menu · data-rq="cabecalho"
Feito para vender.
Três frentes, um objetivo: vender mais.
A Chesslab é uma aceleradora de e-commerce: a gente desenvolve o site, acelera as vendas e faz quem já comprou voltar.
Tráfego sem método vira custo.
Organização extrema.
- Tema
- O cabeçalho lê o
data-temada seção que passa por baixo. Sobre foto (imagem), fica no tema da foto no topo e vira escuro ao rolar.data-cabecalho-tema="fixo"desliga a cópia. - Teclado
- "Serviços" é um botão com
aria-expanded; Esc fecha o painel e devolve o foco. No celular, o menu prende o Tab, deixa o resto da página inerte e fecha com Esc. - Sobre a abertura
.rq-cabecalho--sobrefica fixo e transparente no topo, para a foto passar por baixo.
Migalhas e paginação
Migalhas
.rq-migalhasPaginação
.rq-paginacao · __info · __paginasAbas
O sublinhado desliza com a curva de mola; os painéis trocam de lugar pelo lado do movimento. Setas trocam de aba, Home e End vão às pontas. Sem JS, a lista some e os painéis aparecem em sequência, cada um com o próprio título.
Três frentes
.rq-abas · __lista · .rq-aba · __paineis · __painel · data-rq="abas"Aceleração
Tráfego sem método vira custo.
Tráfego pago, criativo e rotina diária de metas com squad dedicado. Foco em lucro, não só faturamento.
Desenvolvimento
Loja sob medida na Shopify.
Sem tema pronto: design exclusivo no Figma e performance em qualquer dispositivo.
CRM
Compra única vira recompra.
E-mail, cashback e comercial organizado, no varejo e no atacado.
Índice com marcador
Veio do índice da aceleração: um bloco Pistache desliza para o item ativo. Como navegação de página, segue a seção em leitura e, no celular, vira uma barra "Nesta página". Como lista grande, segue o ponteiro.
Navegação da página
.rq-indice · __lista · __marca · __alternar · data-rq="indice"Metas todos os dias
Numa planilha de acompanhamento diário das metas.
Decisões pelo lucro
O custo de aquisição é acompanhado de perto, não só o faturamento.
Rotina de alinhamento
Feedbacks e reuniões semanais e quinzenais.
Tudo medido
O que entregamos é medido num sistema próprio.
Lista grande
.rq-indice--listaPasse o ponteiro. No toque, o marcador acompanha a linha que cruza o meio da tela. Com movimento reduzido, a lista fica parada.
Organização extrema.
Cada projeto tem uma área onde as informações ficam registradas, entre elas:
- Plano de metas
- Mapeamento de concorrentes
- Relatórios mensais
- Feedbacks semanais
- Atas de reuniões
- Planejamento do mês
- Cronograma de eventos sazonais
- Influenciadores
- Manual de anúncios
Passos
Etapas de um processo, com feito, atual e por vir. Horizontal com espaço; vertical abaixo de 640 px do próprio bloco. Mude a largura na barra.
Processo
.rq-passos · .rq-passo · data-estado="feito" · aria-current="step"- DescobrimosConversa, briefing e coleta de referências.
- DesenhamosLayout exclusivo no Figma. Sem tema genérico.
- CodamosTudo na Shopify com performance e responsividade.
- RevisamosVocê navega, testa e aprova.
- PublicamosLoja no ar com suporte inicial.
Rodapé
Colunas curtas, dados da empresa e links legais. O rodapé vivo da home, com a luz que segue o cursor e o "Xeque-mate.", está em Peças vivas.
Atalho do celular
A conversão sempre à mão, no pé da tela, abaixo de 1024 px. Aparece depois da abertura e some perto do contato. Fechado, não volta na sessão. Aqui, preso à demo.