:root { --primeira-cor: #FF6C03; /* LARANJA */ --segunda-cor: #929D35; /* VERDE */ --terceira-cor: #FFEFE3; /* LARANJA CLARO (TOPO E CORPO) */ --quarta-cor: #BD2E50; /* COR DO PREÇO */ --quinta-cor: #716124; /* COR HOVER PARA BOTÕES */ --sexta-cor: #F0F6E8; /* FUNDO DO AVISO SOBRE A DATA DE ENTREGA */ --setima-cor: #9E8045; /* BORDA ESQUERDA DO AVISO SOBRE A DATA DE ENTREGA */ --oitava-cor: #E9E0CF; /* FUNDO DA PÁGINA DE AGRADECIMENTO */ --nona-cor: #7C6636; /* TÍTULOS DA PÁGINA DE AGRADECIMENTO */ --decima-cor: #9E8045; /* BOTÃO VOLTAR DA PÁGINA DE AGRADECIMENTO */ --decima-primeira-cor: #7C6636; /* BOTÃO VOLTAR DA PÁGINA DE AGRADECIMENTO (HOVER) */ --decima-segunda-cor: #BA264A; /* TOTAL DO PRODUTO */ --decima-terceira-cor: #BA264A; /* VALOR DA COMPRA */ --decima-quarta-cor: #FF4876; /* VITRINE-01 * BUSCA * MENSAGEM * NENHUM RESULTADO ENCONTRADO */ /* VITRINE-01 * DESTAQUE DO PRODUTO * INÍCIO */ --decima-quinta-cor: #FF6C03; /* VITRINE-01 * DESTAQUE DO PRODUTO * COR DA BORDA */ --decima-sexta-cor: #FFF8F0; /* VITRINE-01 * DESTAQUE DO PRODUTO * FUNDO DA APRESENTAÇÃO */ --decima-setima-cor: #929D35; /* VITRINE-01 * DESTAQUE DO PRODUTO * IMAGEM DESTACADA */ /* FINAL * VITRINE-01 * DESTAQUE DO PRODUTO */ --banner-01-cor-clara-index: rgba(146, 157, 53, 0.3); --banner-01-cor-escura-index: rgba(146, 157, 53, 0.6); --banner-01-cor-clara-paginas: rgba(146, 157, 53, 0.3); --banner-01-cor-escura-paginas: rgba(146, 157, 53, 0.6); --cor-branca: #FFF; /* ====================================================================== INDEX-01.CSS * INÍCIO ====================================================================== */ --index-01-fundo: var(--terceira-cor); /* BARRA DE ROLAGEM INDEX-01.CSS, CARRINHO-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS * INÍCIO */ --index-01-scrollbar: var(--primeira-cor) var(--terceira-cor); --index-01-scrollbar-thumb-color: var(--primeira-cor); --index-01-scrollbar-border: var(--terceira-cor); --index-01-scrollbar-track: var(--terceira-cor); /* FINAL * BARRA DE ROLAGEM INDEX-01.CSS, CARRINHO-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS */ /* BOTAO VOLTAR PARA O TOPO INDEX-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS * INÍCIO */ --index-01-botao-voltar-para-o-topo: var(--primeira-cor); --index-01-botao-voltar-para-o-topo-hover: var(--quinta-cor); /* FINAL * BOTAO VOLTAR PARA O TOPO INDEX-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS */ --index-01-fundo-do-topo-01: var(--primeira-cor); --index-01-fundo-do-topo-02: var(--terceira-cor); --index-01-cor-do-menu-do-topo-02: var(--primeira-cor); --index-01-cor-do-menu-do-topo-02-mobile-nav: var(--terceira-cor); --index-01-cor-do-menu-do-topo-02-mobile-nav-ul-li-a: var(--primeira-cor); --index-01-cor-do-menu-do-topo-02-mobile-nav-ul-li-a-border-bottom: var(--terceira-cor); --index-01-cor-do-menu-do-topo-02-mobile-nav-ul-li-a-hover: var(--segunda-cor); --index-01-menu-categorias: var(--primeira-cor); --index-01-menu-categorias-hover: var(--segunda-cor); --index-01-menu-categorias-submenu: var(--terceira-cor); --index-01-menu-categorias-submenu-hover: var(--terceira-cor); --index-01-botao-do-menu-mobile: var(--terceira-cor); --index-01-menu-categorias-responsivo: var(--terceira-cor); /* RODAPÉ * INDEX-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS * INÍCIO */ --index-01-rodape-cor-de-fundo: var(--segunda-cor); --index-01-rodape-cor-do-texto-menos-do-copyright: var(--cor-branca); --index-01-rodape-cor-dos-icones-das-redes-sociais: var(--cor-branca); --index-01-rodape-cor-do-texto-do-copyright: var(--cor-branca); /* FINAL * RODAPÉ * INDEX-01.CSS E LOU-LOJA-WEB-01-01-PAGINAS-01.CSS */ /* ====================================================================== FINAL * INDEX-01.CSS ====================================================================== */ /* ====================================================================== INDEX-02.CSS * INÍCIO ====================================================================== */ --index-02-banner-01-index-cor-clara: var(--banner-01-cor-clara-index); --index-02-banner-01-index-cor-escura: var(--banner-01-cor-escura-index); --index-02-botao-de-busca-submit: var(--primeira-cor); --index-02-botao-de-busca: var(--primeira-cor); --index-02-botao-de-busca-hover: var(--quinta-cor); --index-02-busca-mensagem-nenhum-resultado-encontrado: var(--decima-quarta-cor); --index-02-botao-do-carrinho-no-topo-da-index: var(--segunda-cor); --index-02-botao-do-carrinho-no-topo-da-index-hover: var(--primeira-cor); --index-02-botoes-de-adicionar-e-ver-carrinho: var(--primeira-cor); --index-02-botoes-de-adicionar-e-ver-carrinho-hover: var(--segunda-cor); --index-02-botao-paginacao: var(--primeira-cor); --index-02-botao-paginacao-hover: var(--segunda-cor); /* ====================================================================== FINAL * INDEX-02.CSS ====================================================================== */ /* ====================================================================== VITRINE-01.CSS * INÍCIO ====================================================================== */ --vitrine-01-popup-informacao-border: var(--primeira-cor); --vitrine-01-botoes-de-informacoes-do-produto: var(--primeira-cor); --vitrine-01-titulos-do-produto: var(--primeira-cor); --vitrine-01-total-de-cada-produto-antes-de-o-colocarmos-no-carrinho: var(--decima-segunda-cor); --vitrine-01-valor-total-da-compra-no-checkout-no-carrinho: var(--decima-terceira-cor); --vitrine-01-botao-fechar-popup: var(--primeira-cor); --vitrine-01-cor-da-letra-do-botao-fechar-popup: var(--cor-branca); --vitrine-01-cor-dos-botoes-informacoes-e-fechar-popup-hover: var(--primeira-cor); --vitrine-01-etiqueta-do-produto: var(--segunda-cor); --vitrine-01-destaque-do-produto-borda: var(--decima-quinta-cor); --vitrine-01-destaque-do-produto-fundo-da-apresentacao: var(--decima-sexta-cor); --vitrine-01-destaque-do-produto-imagem-destacada: var(--decima-setima-cor); /* ====================================================================== FINAL * VITRINE-01.CSS ====================================================================== */ /* ====================================================================== LOU-LOJA-WEB-01-01-PAGINAS-01.CSS * INÍCIO ====================================================================== */ --paginas-01-topo-e-corpo: var(--terceira-cor); /* BARRA DE ROLAGEM * CONFIGURAÇÃO NESTA PÁGINA ONDE CONFIGURAMOS OS CÓDIGOS PARA O ARQUIVO INDEX-01.CSS */ /* BOTÃO VOLTAR PARA O TOPO * CONFIGURAÇÃO NESTA PÁGINA ONDE CONFIGURAMOS OS CÓDIGOS PARA O ARQUIVO INDEX-01.CSS */ --paginas-01-topo-01-barra-superior-contato: var(--primeira-cor); --paginas-01-header-logotipo-menu-mobile-botao-carrinho: var(--terceira-cor); --paginas-01-hamburguer-menu: var(--primeira-cor); --paginas-01-mobile-nav: var(--terceira-cor); --paginas-01-mobile-nav-ul-li-a: var(--primeira-cor); --paginas-01-mobile-nav-ul-li-a-border-bottom: var(--terceira-cor); --paginas-01-mobile-nav-ul-li-a-hover: var(--segunda-cor); --paginas-01-botao-carrinho: var(--segunda-cor); --paginas-01-botao-carrinho-hover: var(--primeira-cor); --paginas-01-banner-01-paginas-cor-clara: var(--banner-01-cor-clara-paginas); --paginas-01-banner-01-paginas-cor-escura: var(--banner-01-cor-escura-paginas); --paginas-01-banner-01-paginas-cor-do-titulo: var(--cor-branca); /* RODAPÉ * CONFIGURAÇÃO NESTA PÁGINA ONDE CONFIGURAMOS OS CÓDIGOS PARA O ARQUIVO INDEX-01.CSS */ /* ====================================================================== FINAL * LOU-LOJA-WEB-01-01-PAGINAS-01.CSS ====================================================================== */ /* ====================================================================== CARRINHO-01.CSS * INÍCIO ====================================================================== */ /* ====================================================================== CARRINHO VAZIO * CARRINHO-01.CSS * INÍCIO ====================================================================== */ --carrinho-01-carrinho-vazio-topo-e-corpo: var(--terceira-cor); --carrinho-01-carrinho-vazio-titulos: var(--segunda-cor); /* BARRA DE ROLAGEM * CONFIGURAÇÃO NESTA PÁGINA ONDE CONFIGURAMOS OS CÓDIGOS PARA O ARQUIVO INDEX-01.CSS */ --carrinho-01-carrinho-vazio-botao-voltar: var(--segunda-cor); --carrinho-01-carrinho-vazio-botao-voltar-hover: var(--primeira-cor); /* ====================================================================== FINAL * CARRINHO VAZIO * CARRINHO-01.CSS ====================================================================== */ /* ====================================================================== CARRINHO COM PRODUTOS * CARRINHO-01.CSS * INÍCIO ====================================================================== */ --carrinho-01-carrinho-com-produtos-topo-e-corpo: var(--terceira-cor); --carrinho-01-carrinho-com-produtos-titulos: var(--primeira-cor); /* BARRA DE ROLAGEM * CONFIGURAÇÃO NESTA PÁGINA ONDE CONFIGURAMOS OS CÓDIGOS PARA O ARQUIVO INDEX-01.CSS */ --carrinho-01-carrinho-com-produtos-slug: var(--segunda-cor); --carrinho-01-carrinho-com-produtos-tabela-do-carrinho: var(--segunda-cor); --carrinho-01-carrinho-com-produtos-botao-atualizar-produtos-no-carrinho: var(--primeira-cor); --carrinho-01-carrinho-com-produtos-botao-atualizar-produtos-no-carrinho-hover: var(--quinta-cor); --carrinho-01-carrinho-com-produtos-botao-de-envio-pelo-whatsapp: var(--primeira-cor); --carrinho-01-carrinho-com-produtos-botao-de-envio-pelo-whatsapp-hover: var(--quinta-cor); --carrinho-01-carrinho-com-produtos-botao-voltar: var(--segunda-cor); --carrinho-01-carrinho-com-produtos-botao-voltar-hover: var(--quinta-cor); --carrinho-01-carrinho-com-produtos-botao-remover-produtos: var(--primeira-cor); --carrinho-01-carrinho-com-produtos-botao-remover-produtos-hover: var(--quinta-cor); --carrinho-01-carrinho-com-produtos-fundo-do-aviso-sobre-a-data-de-entrega: var(--sexta-cor); --carrinho-01-carrinho-com-produtos-borda-esquerda-do-aviso-sobre-a-data-de-entrega: var(--setima-cor); /* ====================================================================== FINAL * CARRINHO COM PRODUTOS * CARRINHO-01.CSS ====================================================================== */ /* ====================================================================== FINAL * CARRINHO-01.CSS ====================================================================== */ /* ====================================================================== AGRADECIMENTO-01.CSS * INÍCIO ====================================================================== */ --agradecimento-01-fundo-agradecimento: var(--oitava-cor); --agradecimento-01-titulos-agradecimento: var(--nona-cor); --agradecimento-01-botao-voltar-agradecimento: var(--decima-cor); --agradecimento-01-botao-voltar-agradecimento-hover: var(--decima-primeira-cor); /* ====================================================================== FINAL * AGRADECIMENTO-01.CSS ====================================================================== */ } /* ====================================================================== BOTÃO VOLTAR AO TOPO * INÍCIO ====================================================================== */ #btnTopo .voltar-ao-topo { line-height: 1; /* Remove espaços extras acima e abaixo da linha do texto, deixando a seta mais justa ao tamanho da fonte, */ position: relative; /* evitando que o navegador adicione espaçamento vertical que não queremos */ top: -3px; color: #FFF; /* Cor da seta que aponta para cima */ font-size: 36px; /* Tamanho da seta que aponta para cima */ font-weight: bold; /* Faz a sete que aponta para cima ficar em negrito (é o peso da fonte, podemos colocar 400, 700, etc.) */ } /* 700 é o peso do bold (negrito) */ #btnTopo { all: unset; /* Limpa qualquer estilo herdado | Temos que usar esse código para que o botão Voltar Ao Topo */ position: fixed; /* seja igual em todas as páginas do sistema */ bottom: 20px; right: 20px; width: 36px; /* Largura do botão */ height: 36px; /* Altura do botão */ line-height: 36px; /* Acompanha a altura do botão */ background-color: var(--index-01-botao-voltar-para-o-topo); border: none; border-radius: 8px; cursor: pointer; align-items: center; /* Centraliza o conteúdo verticalmente dentro do botão (eixo Y) quando usamos display: flex; */ display: flex; /* como nesta linha */ justify-content: center; /* Centraliza o conteúdo horizontalmente dentro do botão (eixo X) quando usamos display: flex; */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* como na linha acima */ opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.3s ease; z-index: 1000; box-sizing: border-box; } #btnTopo:hover { background-color: var(--index-01-botao-voltar-para-o-topo-hover); transform: scale(1.05); } /* ====================================================================== MOBILE * BOTÃO VOLTAR AO TOPO ====================================================================== */ @media (max-width: 600px) { #btnTopo { width: 32px; height: 32px; line-height: 32px; bottom: 15px; /* Sobe um pouco o botão em relação à borda inferior */ right: 15px; /* Afasta um pouco o botão da borda lateral direita da tela */ } #btnTopo .voltar-ao-topo { font-size: 24px; top: -2px; } } /* ====================================================================== FINAL * BOTÃO VOLTAR AO TOPO ====================================================================== */