:root{ --red-900:#6b0f0f; --red-800:#7e1010; --red-700:#8b100e; --text:#1f2328; --muted:#6b7280; --bg:#ffffff; --card:#ffffff; --line:#e7e7e7; --shadow: 0 10px 30px rgba(0,0,0,.08); --radius: 14px; --orange: #f3b100; } *{ box-sizing:border-box; } /* overflow-x:hidden e height:100% ficam só no , nunca somados no : essa combinação faz o body virar seu próprio contêiner de rolagem (limitado a 1 tela de altura) em vez de deixar o html cuidar da rolagem real da página — e isso quebra position:sticky em qualquer filho direto do body (como o .header) assim que o conteúdo passa da primeira tela. */ html{ height:100%; overflow-x:hidden; /* evita rolagem horizontal em telas pequenas */ -webkit-text-size-adjust:100%; } body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); width:100%; } a{ color:inherit; text-decoration:none; } button, input, select, textarea{ font:inherit; } img{ max-width:100%; } .container{ width:min(1180px, 92vw); margin-inline:auto; } @media (max-width:480px){ .container{ width:94vw; } } .topbar{ background: var(--red-700); color:#fff; font-size: 12.5px; } .topbar__wrap{ display:flex; gap:16px; justify-content:space-between; padding-block:10px; } .topbar__right{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; } .topbar__item{ opacity:.95; white-space:nowrap; } @media (max-width:768px){ .topbar{ display:none; } /* oculta telefone, horário e localização em telas <=768px */ } .header{ background-color: var(--red-700); /* fallback se a imagem não carregar */ background-image: url("./fotos/barra_pesquisa_header.png"); background-repeat: no-repeat; background-position: center; background-size:cover; border-bottom: 3px solid rgba(255,255,255,.15); /* Header fixo ao rolar — vale pra TODAS as páginas que usam .header. z-index alto pra ficar acima de cards, badges e painéis sticky do conteúdo (ex.: resumo do carrinho, menu lateral de informações). */ position: sticky; top: 0; z-index: 500; } .header__wrap{ display:flex; align-items:center; gap:18px; height: 95px; padding-block: 50px; } .logo{ display:flex; align-items:center; gap:10px; min-width: 160px; } .logo__img{ width: 220px; height: auto; display: block; object-fit: contain; /* laranja mais claro / suave */ filter: brightness(1.15) saturate(0.86); } .search{ flex:1; display:flex; align-items:center; gap:10px; background:#fff; border-radius: 12px; padding: 8px 10px 8px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .search__input{ border:0; outline:none; width:100%; font-size:14.5px; min-width:0; } /* Header responsivo — em telas de até 1024px (celular e tablet) o logo e os ícones de carrinho/login ficam na mesma linha, e a busca sempre desce para uma segunda linha abaixo do cabeçalho, ocupando toda a largura (referência: Drogasil mobile). Este bloco vem DEPOIS das regras base do .search de propósito — como ambas têm a mesma especificidade, a que aparece por último no arquivo é a que vale; colocando a versão mobile por último garantimos que ela sempre vença nessas telas. IMPORTANTE: .header__wrap tem height:95px fixo na regra base — sem o height:auto abaixo, a segunda linha (a busca) fica mais alta que essa caixa e vaza visualmente por baixo do cabeçalho, sobrepondo o conteúdo seguinte da página. */ @media (max-width:1024px){ .header__wrap{ height:auto; flex-wrap:wrap; gap:10px; padding-block:10px; } .logo{ order:1; min-width:0; flex:0 0 auto; } .logo__img{ width:150px; } .actions{ order:2; margin-left:auto; } .search{ order:3; flex:1 0 100%; width:100%; padding: 8px 8px 8px 14px; } .search__input{ font-size:16px; } /* evita zoom automático no iOS ao focar */ } @media (max-width:380px){ .logo__img{ width:120px; } } .search__btn{ border:0; background:transparent; cursor:pointer; font-size:18px; padding: 6px 10px; border-radius: 999px; color:#63615c; } .search__btn:hover{ background: rgba(0,0,0,.06); } .search__btn .icon{ width:18px; height:18px; } /* Ícones SVG mascarados em currentColor (permite recolorir por contexto) */ .icon{ display:inline-block; width:18px; height:18px; background-color: currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; vertical-align:middle; } .icon-lupa{ -webkit-mask-image:url('./fotos/lupa.svg'); mask-image:url('./fotos/lupa.svg'); } .icon-carrinho{ -webkit-mask-image:url('./fotos/carrinho.svg'); mask-image:url('./fotos/carrinho.svg'); } .icon-usuario{ -webkit-mask-image:url('./fotos/usuario.svg'); mask-image:url('./fotos/usuario.svg'); } .icon-relatorio{ -webkit-mask-image:url('./fotos/orcamento-da-tarefa-da-lista-de-verificacao.svg'); mask-image:url('./fotos/orcamento-da-tarefa-da-lista-de-verificacao.svg'); } .icon-home{ -webkit-mask-image:url('./fotos/casa.svg'); mask-image:url('./fotos/casa.svg'); } /* ── Mascote Doutor Luz ────────────────────────────────────────────────── As imagens do mascote têm proporções bem diferentes entre si (a do header é corpo inteiro, bem mais alta que larga) — por isso o dimensionamento é sempre por HEIGHT com width:auto, nunca por width fixo. */ /* No header: botão que leva ao blog, ao lado da logomarca */ .mascote-header{ display:flex; align-items:center; flex:0 0 auto; position: relative; /* ancora o balão "Blog" (::after) abaixo */ /* .header__wrap tem gap:18px entre TODOS os filhos — essa margem negativa encurta só o espaço entre o mascote e a logo (o próximo irmão), deixando os dois bem colados sem afetar o espaçamento entre logo/busca/ações. */ margin-right: -12px; } .mascote-header img{ height:85px; /* cabe nos 95px do header sem empurrar nada */ width:auto; display:block; transition: transform .25s ease; } .mascote-header:hover img{ transform: scale(1.08); } /* Balão "Blog" — indica que o mascote é clicável (leva pro blog) mesmo antes do usuário passar o mouse por cima. Pulsa algumas vezes ao carregar a página pra chamar atenção, sem ficar piscando pra sempre. */ .mascote-header::after{ content: 'Blog'; position: absolute; top: 2px; right: 63px; background: var(--orange, #f3b100); color: var(--text); font-size: 10px; font-weight: 800; line-height: 1; padding: 4px 8px; border-radius: 999px 999px 2px 999px; /* canto inferior esquerdo "aponta" pro mascote */ box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; /* nunca atrapalha o clique no mascote */ animation: mascoteBalaoPulso 1.6s ease-in-out 3; } @keyframes mascoteBalaoPulso{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* No mobile o header quebra em 2 linhas (logo+ações em cima, busca embaixo por inteiro) — o mascote é um elemento importante, então continua visível, só menor, pra não brigar por espaço com a logo e as ações na 1ª linha. Sem "order" explícito ele já renderiza antes da logo (ambos flex, e a logo só ganha order:1 nessas larguras — item sem order fica em 0, que vem antes). */ @media (max-width:1024px){ .mascote-header{ margin-right:-6px; } .mascote-header img{ height:56px; } /* Ícone menor + pouco espaço ao lado da logo/busca — o balão apertaria o layout, então some aqui; o hover/scale continua funcionando. */ .mascote-header::after{ display:none; } } @media (max-width:480px){ .mascote-header img{ height:44px; } } /* Ao lado de títulos de seção (home) e de página (carrinho) */ .section__title--mascote{ display:inline-flex; align-items:flex-end; gap: 5px; } .mascote-titulo{ height:74px; width:auto; display:block; } .actions{ display:flex; align-items:center; gap:14px; } .actions__item{ display:flex; align-items:center; gap:10px; color:#fff; padding: 10px 12px; border-radius: 10px; } .actions__item:hover{ background: rgba(255,255,255,.10); } .actions__icon{ width:23px; height:23px; color:#f3b100; } .actions__text{ font-size: 13.5px; font-weight: 650; white-space:nowrap; } /* Bloco "Cesta / R$ 0,00" do botão do carrinho — label em cima, soma dos produtos já adicionados embaixo (atualizado via atualizarTotalCarrinho em api.js, junto com o badge de quantidade). */ .actions__cart-info{ display:flex; flex-direction:column; line-height:1.25; } .cart-total{ font-size: 13px; font-weight: 800; color:#f3b100; white-space:nowrap; } @media (max-width:768px){ .actions{ gap:2px; } .actions__item{ padding:8px; gap:0; flex-direction:column; } .actions__text{ display:none; } /* ícone apenas, como na referência mobile */ .actions__cart-info{ display:none; } .actions__icon{ width:21px; height:21px; } } .section{ padding: 26px 0; } .section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom: 30px; border-bottom: 2px solid var(--red-700); } .section__title{ margin:0; color: var(--red-700); font-size: 20px; letter-spacing:.2px; } .section__link{ color: var(--muted); font-size: 13.5px; } .section__link:hover{ text-decoration: underline; } /* ── Barra de navegação (home, acima dos ícones de grupos) ─────────────── Mesma identidade dos tiles de grupo: fundo #fff9e7 e fonte var(--red-700). */ .navbar{ background: #f4f4f6; margin-top: 10px; } .navbar__wrap{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 8px 44px; padding-block:12px; } .navbar__link{ border:0; background:none; cursor:pointer; color:var(--red-700); font-size:14px; font-weight:700; letter-spacing:.2px; display:inline-flex; align-items:center; gap:7px; padding:4px 2px; } .navbar__link:hover{ text-decoration:underline; } .navbar__caret{ font-size:10px; } /* Variante com 2 linhas ("Fale Conosco" / "No Whatsapp") */ .navbar__link--stacked{ flex-direction:column; align-items:center; gap:0; line-height:1.2; } .navbar__link-sub{ font-size:11px; font-weight:600; opacity:.8; } .navbar__item--dropdown{ position:relative; } /* O contêiner posicionado é transparente e tem só padding-top: cria o "respiro" visual entre o botão e a janela SEM abrir um vão de hover (o mouse atravessa área que ainda pertence ao item, então o :hover não quebra no caminho até as opções). */ .navbar__dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:10px; display:none; z-index:60; } .navbar__item--dropdown:hover .navbar__dropdown, .navbar__item--dropdown:focus-within .navbar__dropdown{ display:block; } .navbar__dropdown-box{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:190px; } .navbar__dropdown-box a{ display:block; padding:8px 12px; border-radius:8px; color:var(--red-700); font-size:13.5px; font-weight:600; white-space:nowrap; } .navbar__dropdown-box a:hover{ background:#fff9e7; } @media (max-width:768px){ .navbar__wrap{ gap: 6px 22px; padding-block:10px; } .navbar__link{ font-size:13px; } } /* flex + wrap (não grid): com um número de grupos que não é múltiplo exato das colunas, o grid manteria as mesmas colunas em toda linha e deixaria o último item "órfão" alinhado à esquerda em vez de centralizado — flex-wrap centraliza cada linha (inclusive a última, incompleta) independentemente. */ .categories{ display:flex; flex-wrap:wrap; justify-content: center; align-items: flex-start; gap: 70px; /* ajuste conforme desejar */ } .category{ display:flex; flex-direction:column; align-items:center; gap:10px; } .category .Foto{ width: 92px; height: 72px; border-radius: 12px; } .category__icon{ display:flex; align-items:center; justify-content:center; width: 90px; background: #f4f4f6; border-radius: var(--radius); margin-top: 20px; padding: 16px 8px; color: var(--red-700); transition: transform .12s ease, box-shadow .12s ease; } .category__icon svg{ width: 44px; height: 44px; } .category__label{ font-weight: 650; color: var(--red-700); font-size: 13.5px; text-align: center; } .category:hover .category__icon{ transform: translateY(-2px); box-shadow: var(--shadow); } /* Banner / carrossel */ .banner{ position:relative; border-radius: 18px; overflow:hidden; box-shadow: var(--shadow); border: 1px solid var(--line); } .banner__track{ display:flex; transition: transform .45s ease; } .banner__slide{ min-width: 100%; background: #1b1b1b; } .banner__img{ display:block; width:100%; height:380px; object-fit:cover; } @media (max-width:900px){ .banner__img{ height:280px; } } @media (max-width:600px){ .banner__img{ height:200px; } } @media (max-width:380px){ .banner__img{ height:160px; } } .banner__nav{ position:absolute; top:50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center; border:0; width: 40px; height: 40px; border-radius: 999px; cursor:pointer; background: rgba(255,255,255,.85); box-shadow: 0 8px 18px rgba(0,0,0,.18); color: var(--red-700); transition: background .15s ease, transform .15s ease; } .banner__nav svg{ width: 20px; height: 20px; } .banner__nav:hover{ background:#fff; transform: translateY(-50%) scale(1.06); } .banner__nav--prev{ left: 12px; } .banner__nav--next{ right: 12px; } .banner__dots{ position:absolute; left:0; right:0; bottom: 10px; display:flex; justify-content:center; gap:8px; padding: 6px 10px; } .dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.15); cursor:pointer; } .dot.is-active{ background: #fff; } /* Produtos */ .products{ display:grid; grid-template-columns: repeat(4, 1fr); /* 4 por linha */ gap: 16px; } .product{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; display:flex; flex-direction:column; height:100%; /* junto com o grid, faz todos os cards da linha terem a mesma altura */ } .product:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(139,16,14,.25); } .product__media{ position:relative; padding: 12px; background: #fafafa; } .product__media .Foto{ height: 150px; border-radius: 12px; } .product__fav{ position:absolute; top: 10px; right: 10px; border: 1px solid var(--line); background:#fff; width: 34px; height: 34px; border-radius: 999px; cursor:pointer; font-size: 16px; } .product__fav.is-on{ border-color: rgba(139,16,14,.35); } .product__body{ padding: 12px 12px 14px; display:flex; flex-direction:column; flex:1; /* ocupa o restante do card, permitindo empurrar o botão para o final */ gap: 8px; } .product__brand{ font-size: 11.5px; color: var(--red-700); font-weight: 800; } .product__name{ margin:0; font-size: 16px; line-height: 1.25; min-height: 32px; } .product__meta{ display:flex; align-items:center; gap:8px; color: #f59e0b; } .stars{ font-size: 13px; letter-spacing:.6px; } .product__reviews{ color: var(--muted); font-size: 12.5px; } .product__price{ font-weight: 900; font-size: 18px; color: #111827; margin-top: 2px; } /* Selo de desconto (promoção) no canto superior direito do card */ .product__discount{ position:absolute; top:10px; right:10px; z-index:2; background: var(--red-700); color:#fff; font-size:12px; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); } /* Bloco de preço em promoção: original riscado em cima, preço final embaixo */ .product__price-wrap{ display:flex; flex-direction:column; margin-top:2px; } .product__price-old{ font-size:13px; color: var(--muted); text-decoration: line-through; line-height:1.15; } .btn{ border:0; cursor:pointer; padding: 10px 12px; border-radius: 999px; font-weight: 800; display:flex; align-items:center; justify-content:center; gap:8px; } .btn--primary{ background: var(--orange); color: var(--red-700); border: solid 1px var(--red-700); } .btn--primary:hover{ filter: brightness(.98); } .btn__icon{ width:16px; height:16px; color: var(--red-700); } /* Fallback: empurra o botão "Adicionar" para o final do card, caso algum card não defina margin-top:auto inline — evita desalinhamento entre cards vizinhos quando o nome do produto ocupa 1, 2 ou 3 linhas */ .product__body > .btn{ margin-top:auto; } .footer{ border-top: 1px solid var(--line); margin-top: 30px; padding: 18px 0; color: var(--muted); font-size: 13px; } .footer__wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .footer__muted{ opacity:.85; } @media (max-width:480px){ .footer__wrap{ flex-direction:column; text-align:center; gap:4px; } } /* Responsivo */ @media (max-width: 1050px){ .categories{ gap:36px; } .products{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px){ .actions{ justify-content:flex-end; } .top-contact-bar{ display:none; } .categories{ display:none; } .products{ grid-template-columns: repeat(2, 1fr); gap:10px; } /* sempre 2 por linha, como na referência */ .banner__nav{ display:none; } .section{ padding: 16px 0; } .section__title{ font-size:17px; } .section__head{ margin-bottom:14px; padding-bottom:8px; } /* Cards de produto mais compactos, reduzindo margens/espaçamentos */ .product__media{ padding:8px; } .product__media .Foto, .product__img, .product__img-placeholder{ height:120px; } .product__body{ padding:10px 10px 12px; gap:6px; } .product__name{ font-size:13.5px; min-height:auto; } .product__brand{ font-size:10.5px; } .product__price{ font-size:16px; } .btn{ padding:9px 10px; font-size:12.5px; } } @media (max-width: 480px){ .categories{ gap:16px 28px; } .category .Foto{ width:100%; height:64px; } .category__icon{ width:78px; margin-top:10px; } .category__icon svg{ width:34px; height:34px; } .category__label{ font-size:12px; text-align:center; } } @media (max-width: 360px){ .product__media .Foto, .product__img, .product__img-placeholder{ height:100px; } .product__name{ font-size:13px; } } /* ========================= Newsletter (print) ========================= */ .section--newsletter{ padding: 34px 0 22px; border-top: 1px solid var(--line); background: #fff; } .newsletter__wrap{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items:start; } .newsletter__text{ display:flex; align-items:flex-start; gap:14px; } @media (max-width:600px){ .newsletter__text{ align-items:center; } .newsletter__text .mascote-titulo{ height:56px; } } .newsletter__title{ margin:0 0 6px; font-size: 22px; color: var(--red-700); letter-spacing:.2px; } .newsletter__desc{ margin:0; color: #4b5563; font-size: 13.5px; } .newsletter__hint{ margin:6px 0 0; color: #6b7280; font-size: 12.5px; } .newsletter__form{ display:flex; flex-direction:column; gap: 10px; } .newsletter__row{ display:flex; gap: 10px; align-items:center; } .newsletter__input{ flex:1; height: 40px; border-radius: 4px; border: 1px solid #d7d7d7; padding: 0 12px; outline:none; font-size: 13.5px; } .newsletter__input:focus{ border-color: rgba(139,16,14,.35); box-shadow: 0 0 0 3px rgba(139,16,14,.10); } .newsletter__btn{ height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); background: var(--red-700); color:#fff; font-weight: 800; border-radius: 4px; cursor:pointer; display:flex; align-items:center; gap: 8px; } .newsletter__btn:hover{ filter: brightness(.98); } .newsletter__check{ display:flex; align-items:center; gap: 8px; font-size: 12.5px; color: #6b7280; } .newsletter__check input{ width: 14px; height: 14px; } /* ========================= Equipe (print) ========================= */ .section--team{ padding: 26px 0 34px; background:#fff; } .team__wrap{ display:grid; grid-template-columns: 340px 1fr; gap: 26px; align-items:center; } .team__title{ margin:0 0 10px; line-height: 1.05; } .team__titleLine{ color: var(--red-700); font-weight: 900; font-size: 22px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .team__titleBrand{ color: var(--red-700); font-weight: 900; font-size: 22px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .team__desc{ margin:0 0 16px; color:#6b7280; font-size: 12.5px; } .team__cta{ color: var(--red-700); font-weight: 800; font-size: 13px; display:inline-flex; align-items:center; gap: 8px; } .team__cta:hover{ text-decoration: underline; } .team__arrow{ font-size: 18px; transform: translateY(-1px); } .team__grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items:start; } .member{ text-align:center; } .member__photo{ width: 86px; height: 86px; border-radius: 999px; margin: 0 auto 10px; background: #f3f4f6; border: 1px solid #e5e7eb; } .member__photo::after{ content:"Foto"; color:#9ca3af; font-weight:800; } .member__name{ margin:0; font-size: 13px; color: var(--red-700); font-weight: 900; } .member__role{ font-size: 12px; color: #9ca3af; margin-top: 4px; } /* ========================= Rodapé modelo (print) ========================= */ .footer--model{ background: var(--red-700); color:#fff; border-top: 0; margin-top: 0; padding: 34px 0; } .footerModel__wrap{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 22px; align-items:start; } .footerModel__logo{ width:250px; height:auto; display:block; object-fit:contain; margin-bottom:12px; } .footerModel__text{ margin: 12px 0 0; font-size: 12.5px; opacity: .92; max-width: 260px; } .footerModel__title{ margin: 0 0 10px; font-size: 14px; font-weight: 900; } .footerModel__list, .footerModel__links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; font-size: 12.5px; opacity:.95; } .footerModel__links a{ color:#fff; opacity:.95; } .footerModel__links a:hover{ text-decoration: underline; } .footerModel__muted{ font-size: 12.5px; opacity:.92; margin-bottom: 6px; } .social{ display:flex; gap: 10px; margin-top: 8px; } .social__btn{ width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:#fff; font-weight: 900; } .social__btn:hover{ background: rgba(255,255,255,.18); } /* Responsivo */ @media (max-width: 1050px){ .newsletter__wrap{ grid-template-columns: 1fr; } .team__wrap{ grid-template-columns: 1fr; } .team__grid{ grid-template-columns: repeat(3, 1fr); } .footerModel__wrap{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .newsletter__row{ flex-direction:column; align-items:stretch; } .team__grid{ grid-template-columns: repeat(2, 1fr); } .footerModel__wrap{ grid-template-columns: 1fr; } } /* ========================= LOGIN PAGE (modelo) ========================= */ .loginPage{ background:#fff; } .login{ min-height: 100vh; position: relative; } /* Badge decorativo no canto superior esquerdo (só a logo) — não faz mais parte do fluxo/grid da página, fica sobreposto por cima do fundo branco. */ .login__left{ position: absolute; top: 0; left: 0; overflow: hidden; width:300px; height:125px; background: linear-gradient(180deg,#a20d0d,#7e0909); border-bottom-right-radius:300px 120px; border-right: solid 1px rgb(255, 255, 255); box-shadow: inset 0 -8px 0 #ee8a3d, inset 0 -12px 0 #f9ab52; } .login__brand{ display:flex; flex-direction:column; gap: 18px; } /* Tamanho contido para caber inteira na área pintada da curva do badge (o border-radius do .login__left "corta" a maior parte do canto inferior direito da caixa — a logo precisa ficar compacta e colada no canto superior esquerdo para não vazar para fora da curva). */ .login__logo{ width: 200px; height: auto; display: block; margin-left: 15px; margin-top: -23px; } .Foto--loginLogo{ width: 230px; height: 80px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px dashed rgba(255,255,255,.35); color:#fff; } .Foto--loginLogo::after{ content:"Logo"; } /* Rodapé (linha + "Voltar ao site" + copyright) — fica no canto inferior esquerdo da página, sobre o fundo branco (não faz mais parte do badge vermelho, que agora é só a logo). */ .login__footer{ position: absolute; left: 34px; bottom: 24px; display:flex; flex-direction:column; align-items:flex-start; gap: 10px; } .login__line{ border:0; height:1px; background: var(--line); width: 220px; margin: 0; } .login__back{ color:var(--red-700); opacity:.95; font-size: 13px; } .login__back:hover{ text-decoration: underline; } /* Link "‹ Voltar..." dentro do próprio card do formulário — fica logo acima do primeiro campo (ex.: E-mail*), não mais isolado no rodapé. Mesma largura/centralização do .loginForm (360px) pra alinhar exatamente com o campo logo abaixo, em vez da borda do card (520px). */ .loginCard__back{ display:block; width: min(360px, 92vw); margin: 0 auto 16px; text-align:left; color:var(--red-700); opacity:.95; font-size: 13px; } .loginCard__back:hover{ text-decoration: underline; } .login__copy{ font-size: 12px; color: var(--muted); } .login__right{ min-height: 100vh; width: 100%; background:#fff; display:flex; align-items:center; justify-content:center; padding: 30px 18px; } .loginCard{ width: min(520px, 92vw); text-align:center; } .loginCard__title{ margin: 0 0 16px; color: var(--red-700); font-size: 20px; font-weight: 500; } .loginCard__social{ display:flex; justify-content:center; gap: 14px; margin-bottom: 14px; } .socialBtn{ height: 30px; min-width: 128px; border: 1px solid #d1d5db; background:#fff; border-radius: 3px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap: 8px; font-size: 12px; color:#374151; } .socialBtn span{ font-weight: 700; } .socialBtn--fb{ color:#1f4fbf; } .socialBtn--gg{ color:#374151; } .loginCard__divider{ height:1px; background:#e5e7eb; width: 70%; margin: 12px auto 18px; } .loginForm{ width: min(360px, 92vw); margin: 0 auto; text-align:left; } .field{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 12px; } .field__label{ font-size: 12px; color:#6b7280; } .field__input{ height: 34px; border: 1px solid #e5e7eb; border-radius: 3px; padding: 0 10px; outline:none; font-size: 12.5px; } .field__input:focus{ border-color: rgba(139,16,14,.35); box-shadow: 0 0 0 3px rgba(139,16,14,.10); } .field__row{ display:flex; align-items:center; gap: 8px; } .field__toggle{ border:0; background:transparent; cursor:pointer; color:#9ca3af; font-weight: 800; font-size: 11px; padding: 0 4px; } .loginForm__forgot{ display:block; text-align:right; font-size: 12px; color:#9ca3af; margin: 4px 0 12px; } .loginForm__forgot:hover{ text-decoration: underline; } .loginForm__remember{ display:flex; align-items:center; gap: 8px; margin-bottom: 12px; font-size: 12px; color:#9ca3af; cursor:pointer; user-select:none; } .loginForm__remember input[type="checkbox"]{ accent-color: var(--red-700); width: 15px; height: 15px; flex-shrink: 0; cursor:pointer; } .loginForm__submit{ width:100%; height: 36px; border:0; border-radius: 3px; background: var(--red-700); color:#fff; font-weight: 900; cursor:pointer; } .loginForm__submit:hover{ filter: brightness(.98); } .loginForm__or{ display:flex; align-items:center; gap: 10px; margin: 16px 0 12px; color:#9ca3af; font-size: 12px; justify-content:center; } .loginForm__or span{ height:1px; background:#e5e7eb; flex:1; } .loginForm__create{ width:100%; height: 36px; border-radius: 3px; background:#fff; border: 1px solid #f3b100; color: var(--red-700); font-weight: 900; cursor:pointer; } .loginForm__create:hover{ filter: brightness(.99); } .loginCard__links{ margin-top: 28px; display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; font-size: 11.5px; color:#9ca3af; } .loginCard__links a{ color:#9ca3af; } .loginCard__links a:hover{ text-decoration: underline; } /* Responsivo */ @media (max-width: 900px){ .login__footer{ left: 20px; bottom: 16px; } } @media (max-width: 480px){ .login__left{ width:180px; height:90px; border-bottom-right-radius:160px 70px; } .login__brand{ padding: 10px 0 0 14px; } .login__logo{ width:110px; } .login__footer{ left: 16px; bottom: 12px; gap:6px; } .login__line{ width: 140px; } .login__right{ padding:26px 16px; } .field__input{ font-size:16px; height:40px; } /* evita zoom automático no iOS */ .loginForm__submit, .loginForm__create{ height:42px; } } /* ========================= PLP (Página de produtos) ========================= */ .breadcrumb{ font-size: 12px; color: var(--muted); margin-bottom: 14px; } .plp{ display: grid; grid-template-columns: 260px 1fr; gap: 20px; } .filters{ border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; } .filter-group{ display:flex; flex-direction:column; gap:8px; margin-top: 12px; font-size: 13px; } .plp-content{ display:flex; flex-direction:column; gap:14px; } @media (max-width: 900px){ .plp{ grid-template-columns: 1fr; } } /* ========================= FILTROS LATERAIS (PLP) ========================= */ .filters{ border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; height: fit-content; } .filters__header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; } .filters__header h3{ margin:0; font-size: 14px; color: var(--text); } .filters__clear{ font-size: 12px; color: var(--red-700); cursor:pointer; } .filter-title{ font-weight: 700; margin: 12px 0 8px; font-size: 13px; color: var(--text); } .filter-group label{ display:flex; align-items:flex-start; justify-content:space-between; font-size: 13px; color: var(--red-700); margin-bottom: 6px; cursor:pointer; } .filter-group input{ margin-right: 8px; } .filter-group span{ color: var(--muted); font-size: 12px; flex-shrink: 0; } .filter-lab-name{ min-width: 0; } .filter-more{ font-size: 12px; color: var(--muted); margin-top: 6px; display:inline-block; } /* PREÇO — slider de faixa (mín. e máx.) com dois cursores sobrepostos */ .price-slider{ position: relative; height: 28px; margin: 14px 0 4px; } .price-slider__track{ position:absolute; top:50%; left:0; right:0; height:4px; transform: translateY(-50%); background: var(--line); border-radius:999px; } .price-slider__range{ position:absolute; top:50%; height:4px; transform: translateY(-50%); background: var(--red-700); border-radius:999px; } .price-slider__input{ position:absolute; top:0; left:0; width:100%; height:28px; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; } .price-slider__input:focus{ outline:none; } .price-slider__input::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:28px; } .price-slider__input::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--red-700); cursor:pointer; margin-top:6px; box-shadow:0 1px 3px rgba(0,0,0,.25); } .price-slider__input::-moz-range-track{ background:transparent; border:0; height:28px; } .price-slider__input::-moz-range-thumb{ pointer-events:auto; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--red-700); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); } .price-values{ display:flex; justify-content:space-between; font-size: 12px; color: var(--red-700); } /* ─── Extras (banco de dados integrado) ────────────────────────────────────── */ /* Foto gerada (ícone de categoria) */ .product-foto-generated { font-size: 40px; background: rgba(139,16,14,.04) !important; border-color: rgba(139,16,14,.15) !important; color: inherit !important; } .product-foto-generated::after { content: none !important; } /* Imagem real do produto nos cards */ .product__img { display: block; width: 100%; height: 150px; object-fit: contain; border-radius: 8px; background: #fafafa; } /* Placeholder (sem imagem cadastrada) */ .product__img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 150px; border-radius: 8px; background: rgba(139,16,14,.04); border: 1px dashed rgba(139,16,14,.15); font-size: 40px; } .category-foto { font-size: 28px; background: rgba(139,16,14,.06) !important; border-color: rgba(139,16,14,.18) !important; color: inherit !important; display: flex; align-items: center; justify-content: center; } .category-foto::after { content: none !important; } /* Tag de promoção sobre imagem */ .product__tag { position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .3px; } /* Preço com promoção */ .product__price--old { font-size: 13px; color: var(--muted); text-decoration: line-through; } /* Toast notification */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #111827; color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 9999; transition: transform .3s ease, opacity .3s ease; opacity: 0; pointer-events: none; white-space: nowrap; } .toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } /* PLP com mais colunas */ .plp-products { grid-template-columns: repeat(3, 1fr) !important; } /* Links dentro dos nomes de produto */ .product__name a { color: inherit; text-decoration: none; } .product__name a:hover { color: var(--red-700); text-decoration: underline; } /* Filtros de checkbox melhorados */ .filter-group label { gap: 6px; } .filter-group label input[type="checkbox"] { accent-color: var(--red-700); width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; } /* PLP responsivo */ @media (max-width: 1100px) { .plp-products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .plp-products { grid-template-columns: repeat(2, 1fr) !important; gap:10px; } .plp { grid-template-columns: 1fr; gap:14px; } .filters{ padding:12px; } } @media (max-width: 480px) { .breadcrumb{ font-size:11px; } } /* Produto link no card */ .product__media a { display: block; } /* ── Paginação (produtos.html) ──────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 28px; } .page-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .page-btn:hover:not(:disabled) { border-color: rgba(139,16,14,.35); color: var(--red-700); } .page-btn.is-active { background: var(--red-700); border-color: var(--red-700); color: #fff; } .page-btn:disabled { opacity: .4; cursor: not-allowed; } .page-btn--nav { font-size: 16px; } /* Cadastro: mensagens de erro/sucesso + link estilo botão */ .loginForm__create{ display:flex; align-items:center; justify-content:center; text-decoration:none; } .loginForm__msg{ font-size: 12.5px; text-align:center; border-radius: 3px; padding: 8px 10px; margin-bottom: 12px; } .loginForm__msg--erro{ background: #fdecea; color: #b3261e; border: 1px solid #f5c2be; } .loginForm__msg--sucesso{ background: #eaf7ec; color: #1e7b34; border: 1px solid #b9e3c0; } .newsletter__success{ display: none; flex-direction: column; gap: 4px; background: #eaf7ec; color: #1e7b34; border: 1px solid #b9e3c0; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; margin-top: 10px; } .newsletter__success.is-visible{ display: flex; } /* Barra de contato */ .top-contact-bar{ position: relative; background-color: #f4f4f6; background-size: cover; color: #944a20; width: 100%; font-family: Arial, Helvetica, sans-serif; height: 20px; } .top-contact-content{ display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 5px; font-size: 10px; letter-spacing: .4px; font-family: "Merriweather", serif; } .top-contact-content strong{ font-size: 10px; font-weight: 900; } .top-contact-item{ display: inline-flex; align-items: center; gap: 6px; } .top-contact-icon{ display: inline-flex; color: var(--red-700); } .top-contact-icon svg{ width: 13px; height: 13px; } .separator{ color: #555; } @media (max-width:768px){ .top-contact-content{ flex-direction: column; gap: 4px; font-size: 15px; padding: 8px; } .separator{ display:none; } .top-contact-content strong{ font-size:16px; } .top-contact-icon svg{ width: 16px; height: 16px; } } /* ========================= BLOG — Doutor Luz (blog.html) ========================= */ .blog-hero{ display:flex; align-items:center; gap:34px; background: linear-gradient(135deg, var(--red-700), var(--red-900)); border-radius: 18px; padding: 30px 38px 0; color:#fff; overflow:hidden; box-shadow: var(--shadow); } .blog-hero__img{ height:250px; width:auto; display:block; flex:0 0 auto; align-self:flex-end; } .blog-hero__body{ padding-bottom:30px; } .blog-hero__title{ margin:0 0 10px; font-size:28px; font-weight:900; letter-spacing:.2px; } .blog-hero__title span{ color:#f3b100; } .blog-hero__text{ margin:0; font-size:15px; line-height:1.6; opacity:.95; max-width:560px; } .blog-search{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:26px 0 6px; box-shadow: 0 4px 14px rgba(0,0,0,.06); } .blog-search .icon{ color:var(--red-700); flex:0 0 auto; } .blog-search__input{ border:0; outline:none; width:100%; font-size:14.5px; min-width:0; } .blog-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:20px; } .blog-card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:20px; display:flex; flex-direction:column; gap:10px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .blog-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(139,16,14,.25); } .blog-card__tag{ align-self:flex-start; background:#fef3c7; color:#92600a; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 10px; border-radius:999px; } .blog-card__title{ margin:0; font-size:16.5px; line-height:1.3; color:var(--text); } .blog-card__excerpt{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); flex:1; } .blog-card__link{ color:var(--red-700); font-size:13.5px; font-weight:700; } .blog-card__link:hover{ text-decoration:underline; } .blog-vazio{ text-align:center; color:var(--muted); padding:34px 0; display:none; } .blog-vazio__icon{ font-size:40px; } @media (max-width:900px){ .blog-cards{ grid-template-columns: repeat(2, 1fr); } .blog-hero{ padding:24px 24px 0; gap:20px; } .blog-hero__img{ height:190px; } .blog-hero__title{ font-size:22px; } } @media (max-width:600px){ .blog-cards{ grid-template-columns: 1fr; } .blog-hero{ flex-direction:column; align-items:flex-start; padding:24px 20px 0; } .blog-hero__body{ padding-bottom:0; } .blog-hero__img{ align-self:center; height:170px; } } /* ══════════════════════════════════════════════════════════════════════ Rodapé institucional (injetado por footer.js em index, produtos, carrinho, detalhamento_produto e informacoes.html) ────────────────────────────────────────────────────────────────────── Tema CLARO: corpo do rodapé branco com separadores sutis; a única área colorida é a faixa final com a logo, em vermelho da marca e ocupando 100% da largura da tela. Hierarquia: mapa de links → pagamento → bloco legal de farmácia (

) → faixa da logo. Variáveis locais (escopo .footerSite) pra facilitar ajuste de tema: ══════════════════════════════════════════════════════════════════════ */ .footerSite{ /* tema do rodapé */ --ft-ink: var(--text); /* títulos */ --ft-text: #374151; /* links/texto */ --ft-dim: var(--muted); /* texto secundário/legal */ --ft-line: var(--line); /* separadores sutis */ --ft-accent: var(--red-700); /* cor de hover/destaque */ --ft-band: var(--red-700); /* faixa final da logo */ background:#f4f4f6; /* cinza bem claro por trás dos cartões */ border-top:1px solid var(--ft-line); margin-top:48px; font-size:13px; color:var(--ft-text); } /* Foco visível (teclado) em tudo que é interativo dentro do rodapé */ .footerSite a:focus-visible, .footerSite button:focus-visible{ outline:2px solid var(--ft-accent); outline-offset:3px; border-radius:3px; } /* ── Mapa de links (nav, 5 colunas no desktop) ── */ .footerSite__cols{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; padding:28px 0 16px; } /* Título de coluna é um