/*RESET CSS */ body{ box-sizing: border-box; background-color: #111; color: #e0e0e0; margin: 0; padding: 0; outline: none; } a{ text-decoration: none; color: #fff; transition: .3s; } a:hover{ text-decoration: none; opacity: 1; color: #FFa500; } ul{ list-style: none; padding: 0; margin: 0; } /* Header - barra de navegação */ .top-bar{ background-color: aquamarine; width: 100%; padding: 2% 8%; background-color: #111; display: flex; align-items: center; justify-content: space-between; } .top-bar-logo a{ color: #fff; display: flex; align-items: center; justify-content: center; } .top-bar-barra-de-pesquisa{ display: flex; justify-content: center; align-items: center; width: 70%; } .top-bar-barra-de-pesquisa input{ outline: none; border: 1px solid transparent; padding: 10px; width: 80%; height: 40px; border-radius: 50px 0px 0px 50px; } .top-bar-barra-de-pesquisa button{ border: 1px solid transparent; background-color: #fff; color: #111; border-radius: 0px 50px 50px 0px; padding: 10px 30px; width: 6%; height: 40px; display: flex; justify-content: center; } .top-bar-barra-de-pesquisa i{ font-size: 1.2rem; text-align: center; } /* Header - campo de interação com usuário login/cadastro/favoritos/carrinho */ .top-bar-usuario{ display: flex; align-items: center; justify-content: space-between; width: 30%; } .top-bar-usuario i{ margin-right: 15px; font-size: 1.2rem; color: #fff; } .top-bar-usuario i:nth-child(4){ margin-right: 0; } .top-bar-usuario a{ color: #FFa500; margin-right: 10px; } .top-bar-usuario a:hover{ color: #e69500; } .carrinho{ background-color: #FFa500; padding: 5px 10px; } .carrinho i { color: #111; margin-right: 5px; cursor: pointer; } .carrinho .contador-carrinho { color: #111; font-weight: 600; font-size: 1.2rem; } /* Barra de navegação - menu de categoria */ .navbar-brand { margin:0 10% 0 8%; } .dropdown-item:hover{ text-decoration: none; opacity: 1; color: #FFa500; background: none; } .nav-item button:hover{ text-decoration: none; opacity: 1; color: #FFa500; } .btn:hover{ background: none; border: 1px solid transparent; } .dropdown:hover .dropdown-menu { display: block; margin-top: 0; } .menu-ofertas { margin-right: 2%; color: #FFa500; } .menu-ofertas:nth-child(2){ margin-right: 1%; color: #fff; } .menu-ofertas:nth-child(2):hover{ color: #FFa500; } /* Main - conteúdo do produto, galeria de imagens e detalhes do produto*/ .produto{ padding: 2% 8%; width: 100%; display: flex; justify-content: space-between; align-items: start; } .galeria-de-imagens{ width: 50%; } .imagem-principal, .imagens-em-miniaturas img { cursor: pointer; } .imagem-principal-moldura{ overflow: hidden; } .imagem-principal{ transition: transform .1s ease; } .imagem-principal-moldura{ background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .imagens-em-miniaturas{ margin-top: 10px; display: flex; align-items: center; justify-content: space-between; } .imagem-miniatura{ width: 18%; border-radius: 5px; background-color: #fff; } .detalhes-do-produto{ width: 50%; margin-left: 2%; } .mapa-de-categoria p{ color: gray; font-size: 1rem; font-weight: 400; } .breadcrumb-item li{ color: gray; } .active{ color: #777777!important; } .nome-do-produto h1{ font-weight: 700; font-size: 3rem; color: #fff; } .sku{ color: gray; font-size: 1rem; font-weight: 400; } .sku span{ color: #e69500; } .disponibilidade{ color: rgb(46, 187, 53); font-size: 1.2rem; font-weight: 500; } .preco-do-produto h2{ font-size: 4rem; font-weight: 700; color: rgb(46, 187, 53); } .preco-do-produto p{ font-size: .9rem; color: gray; font-weight: 400; } .preco-parcelado-valor{ color: rgb(46, 187, 53); } .avaliacao { font-size: 1.2rem; margin-top: 20px; } .avaliacao i{ color: #e69500; } .quantidade label{ font-size: 1.1rem; margin-right: 10px; display: block; } .quantidade input{ width: 10%; background-color: #fff; border: 1px solid transparent; } .botoes{ margin: 20px auto; } .calcular-cep{ margin: 20px 0; } .calcular-cep label { margin-right: 10px; display: block; } .calcular-cep input { width: 50%; outline: none; background-color: #fff; border: 1px solid transparent; border-radius: 3px; padding: 8px; margin-right: 5px; } .calcular-cep button { border: 1px solid transparent; border-radius: 3px; padding: 8px; width: 30%; } .botoes .carrinho-botao{ border: 2px solid transparent; background-color: rgb(56, 142, 60); color: #fff; font-size: 1rem; padding: 10px 20px; border-radius: 5px; margin-right: 5px; } .botoes .lista{ border: 2px solid #e69500; background-color: #111; color: #e69500; font-size: 1rem; padding: 10px; border-radius: 5px; transition: .3s; } .botoes .lista:hover{ color: #fff; border-color: #fff; } .favorito { transition: 0.3s; } .favorito.ativo { color: #FFA500; } .informacao-de-entrega{ margin-top: 20px; color: gray; font-weight: 400; font-size: 1.1rem; } .informacao-de-entrega span{ color: #fff; } .informacao-de-entrega i { margin-right: 10px; } .descricao-do-produto { width: 90%; margin: 10px auto; } .descricao-do-produto p{ color: #e0e0e0; font-weight: 400; font-size: 1.1rem; } .descricao-do-produto h2{ color: #fff; font-size: 2.5rem; } /* Tabela de especificações */ .avaliacao-nota{ color: #fff; font-size: 1rem; font-weight: 600; margin: 0 5px; } .avaliacao-contagem{ color: gray; font-size: 1rem; } .black-bg{ background-color: #111; padding: 10px; } .tabela-de-especificacoes table { width: 100%; } table th { width: 40%; } table td { width: 60%; } /* Políticas do site */ .products-especs{ background-color: #1e1e1e; padding: 20px; border-radius: 10px; width: 90%; margin: 30px auto; } .tabs{ display: flex; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px; } .tabs li a { margin-right: 30px; color: gray; font-weight: 600; } .tabs li a:hover { color: #fff; } .tabs a.ativo { color: #fff; } .tabs li i{ margin-right: 5px; } .tab-content{ display:none; } .tab-content.ativo{ display:block; } #devolucao { padding: 25px; line-height: 1.8; } #devolucao h2 { font-size: 1.8rem; margin-bottom: 20px; color: #fff; } #devolucao h3 { margin-top: 25px; margin-bottom: 10px; font-size: 1.2rem; color: #fff; } #devolucao p { margin-bottom: 15px; } #devolucao ol { padding-left: 25px; } #devolucao li { margin-bottom: 10px; } .garantia-cliente { margin-top: 25px; padding: 20px; background: #fff8ef; border-left: 4px solid #ff6600; border-radius: 6px; } .garantia-cliente p { margin: 0; font-weight: 600; color: #111; } #entrega { padding: 25px; line-height: 1.8; color: #e0e0e0; } #entrega h2 { font-size: 1.8rem; margin-bottom: 20px; color: #fff; } #entrega h3 { margin-top: 25px; margin-bottom: 10px; font-size: 1.2rem; color: #fff; } #entrega p { margin-bottom: 15px; } .beneficios-entrega { margin-top: 25px; padding: 20px; background: #f4fff4; border-left: 4px solid #ff6600; border-radius: 6px; color: #111; } .beneficios-entrega p { margin: 0; font-weight: 600; color: #333; } /*Rodapé - Footer*/ #rodape{ width: 100%; display: flex; align-items: center; justify-content: center; background-color: #000; padding: 10px; } #rodape p{ margin: 2px; } #rodape span a{ color: #e69500; text-decoration: underline; font-weight: 600; } #rodape span a:hover{ color: #fff; } #rodape p:last-child{ font-size: 1.1rem; letter-spacing: 1px; color: gray; }