/* ===================================================================== DEALS4YOU — GLOBAL.CSS (by get4real.com) Design tokens e componentes compartilhados entre todas as páginas. Sistema de temas: o tema Evergreen (padrão) vive em :root. Elementos de campanha usam [data-campaign="esquenta"] no para sobrescrever só as variáveis de cor de ação — texto, superfície e estrutura permanecem os mesmos em qualquer tema. A logo (assets/logo-full.svg) é sempre preto/branco, em qualquer tema. ===================================================================== */ /* Garante que o atributo `hidden` sempre esconda o elemento, mesmo quando a mesma classe também define `display:flex`/`display:block` (modais, dropdowns, drawers). Sem isso, CSS de autor sempre sobrepõe a folha de estilo padrão do navegador — que só aplicaria `[hidden]{display:none}` em prioridade baixa — deixando o elemento visível mesmo com `hidden` definido. */ [hidden] { display: none !important; } :root{ /* ---- Estrutura (não muda por campanha) ---- */ --color-background: #FAFAF8; --color-surface: #FFFFFF; --color-surface-alt: #F2F1EC; --color-border: #E7E5DE; --color-border-strong: #D6D3C9; --color-text: #14151A; --color-text-dim: #63666E; --color-text-faint: #9A9C9F; /* ---- Funcionais (fixas — nunca seguem o tema de campanha) ---- */ --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #DC2626; --color-danger-soft: rgba(220,38,38,0.08); --color-info: #3D4CE0; --color-info-soft: rgba(61,76,224,0.08); /* ---- Tema Evergreen (padrão): preto, branco, neutros ---- */ --color-primary: #14151A; --color-primary-dark: #000000; --color-on-primary: #FFFFFF; --color-accent: #3F3F46; --color-on-accent: #FFFFFF; --color-accent-soft: rgba(20,21,26,0.06); --color-accent-line: rgba(20,21,26,0.18); --color-badge-discount-bg: var(--color-primary); --color-badge-discount-text: var(--color-on-primary); --gradient-campaign: linear-gradient(135deg, #27272A, #52525B); --shadow-glow: rgba(20,21,26,0.14); --radius-s: 10px; --radius-m: 14px; --radius-l: 20px; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --header-h: 68px; --ease: cubic-bezier(.22,1,.36,1); } /* ---- Tema ESQUENTA DEALS4YOU 🔥 — vermelho, vermelho escuro, preto e branco ---- Ativa-se com . Só as variáveis de ação mudam; fundo, superfície e texto continuam vindo do tema Evergreen. */ [data-campaign="esquenta"]{ --color-primary: #E11D2E; --color-primary-dark: #8C0F1E; --color-on-primary: #FFFFFF; --color-accent: #8C0F1E; --color-on-accent: #FFFFFF; --color-accent-soft: rgba(225,29,46,0.08); --color-accent-line: rgba(225,29,46,0.28); --color-badge-discount-bg: var(--color-primary); --color-badge-discount-text: #FFFFFF; --gradient-campaign: linear-gradient(135deg, #E11D2E, #8C0F1E); --shadow-glow: rgba(225,29,46,0.35); } *,*::before,*::after{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family: var(--font-body); background: var(--color-background); color: var(--color-text); -webkit-font-smoothing: antialiased; overflow-x:hidden; padding-bottom: 78px; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;} input, select, textarea{font-family:inherit;} ul{list-style:none;} .container{width:90%; max-width:1180px; margin:0 auto; padding:0 20px;} ::selection{background:var(--color-accent); color:#fff;} .material-symbols-outlined{ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22; line-height:1; user-select:none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);} /* ===================== HEADER ===================== */ .site-header{ position:sticky; top:0; z-index:100; height:var(--header-h); display:flex; align-items:center; background: rgba(0, 0, 0, 0.918); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .header-inner{display:flex; align-items:center; width:100%; gap:14px;} .logo{display:flex; align-items:baseline; gap:1px; font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-0.5px; flex-shrink:0;} .logo-img{height:40px; width:auto; display:block;} .footer-brand .logo-img{height:36px;} .logo .mark{color:var(--color-accent);} .logo .dim{font-weight:500; color:var(--color-text-faint); margin-left:3px;} .nav-links{display:none; align-items:center; gap:30px; margin-left:34px;} .nav-links a{font-size:14px; font-weight:600; color:var(--color-border-strong); position:relative; padding:6px 0; transition:color .2s;} .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--color-background); transform:scaleX(0); transform-origin:right; transition:transform .28s var(--ease); } .nav-links a:hover{color:var(--color-background);} .nav-links a:hover::after{transform:scaleX(1); transform-origin:left;} .nav-links a.active{color:var(--color-background);} .nav-links a.active::after{transform:scaleX(1); transform-origin:left; background:var(--color-background);} .header-actions{display:flex; align-items:center; gap:8px; margin-left:auto;} .header-actions{ .btn-outline{background:transparent; border:1px solid var(--color-border-strong); color:var(--color-surface);} .btn-outline:hover{border-color:var(--color-surface); background:var(--color-surface); color: var(--color-text);} } .icon-btn{ width:40px; height:40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background:var(--color-surface);color:var(--color-text-dim); transition: border-color .2s, color .2s, transform .15s; } .icon-btn .material-symbols-outlined{font-size:20px;} .icon-btn:hover{border-color:var(--color-border-strong); color:var(--color-text); transform:translateY(-1px);} .icon-btn:active{transform:scale(0.94);} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:600; font-size:13px; border-radius:11px; padding:9px 15px; transition: transform .15s var(--ease), background .2s, border-color .2s, opacity .2s, color .2s; white-space:nowrap; font-family:var(--font-body); } .btn:active{transform:scale(0.97);} .btn:disabled{opacity:.55; cursor:not-allowed; transform:none;} .btn .material-symbols-outlined{font-size:19px;} .btn-dark{background:var(--color-primary); color:var(--color-on-primary);} .btn-dark:hover{background:var(--color-primary-dark); color: var(--color-background);} .btn-outline{background:transparent; border:1px solid var(--color-border-strong); color:var(--color-text);} .btn-outline:hover{border-color:var(--color-text); background:var(--color-surface);} .btn-accent{background:var(--color-accent); color:var(--color-on-accent);} .btn-accent:hover{filter:brightness(0.88);} .btn-danger{background:var(--color-danger); color:#fff;} .btn-danger:hover{opacity:.9;} .btn-block{width:100%;} .btn-sm{padding:8px 13px; font-size:13px; border-radius:9px;} .btn-lg{padding:15px 20px; font-size:15px; border-radius:14px;} .hide-mobile{display:none;} .hide-desktop{display:inline-flex;} /* ===================== SEARCH ===================== */ .search-wrap{ position:sticky; top:var(--header-h); z-index:90; background: rgba(0, 0, 0, 0.829); backdrop-filter: blur(14px) saturate(140%); border: none !important; padding:14px 0; border-bottom:1px solid var(--color-border); .container{ width: 100%; } } .search-box{ display:flex; align-items:center; gap:10px; background:var(--color-surface); border-radius:14px; padding:13px 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .search-box:focus-within{ border-color: var(--color-text); box-shadow: 0 0 0 3.5px rgba(20,21,26,0.06); } .search-box .material-symbols-outlined{color:var(--color-text-faint); font-size:20px;} .search-box input{ flex:1; border:none; outline:none; background:none; font-size:14px; color:var(--color-text); min-width:0; } .search-box input::placeholder{color:var(--color-text-faint);} .search-clear{display:none; color:var(--color-text-faint); padding:2px; border-radius:6px;} .search-clear.show{display:flex;} .search-clear:hover{color:var(--color-text);} .search-meta{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--color-text-faint); margin-top:10px; padding:0 2px;} #resultCount b{color:var(--color-background); font-weight:700;} /* ===================== CATEGORY CHIPS (compartilhado) ===================== */ .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:10px;} .section-head h2{font-family:var(--font-display); font-size:19px; font-weight:800; letter-spacing:-0.3px; display:flex; align-items:center; gap:8px;} .chips-row{display:flex; gap:8px; overflow-x:auto; padding:2px 15px; scroll-snap-type:x proximity; scroll-padding-inline: 15px;} .chip{ scroll-snap-align:start; flex-shrink:0; display:flex; align-items:center; gap:7px; padding:10px 15px 10px 12px; border-radius:100px; background:var(--color-surface); border:1px solid var(--color-border); font-size:13.5px; font-weight:600; color:var(--color-text-dim); transition: all .2s var(--ease); } .chip .material-symbols-outlined{font-size:17px;} .chip:hover{border-color:var(--color-border-strong); color:var(--color-text);} .chip.active{background:var(--color-text); border-color:var(--color-text); color:var(--color-background);} /* ===================== TOOLBAR ===================== */ .toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:22px 0 18px; flex-wrap:wrap;} .sort-wrap{position:relative; display:flex; align-items:center;} .sort-wrap .material-symbols-outlined.lead{position:absolute; left:12px; font-size:17px; color:var(--color-text-faint); pointer-events:none;} .sort-select{ appearance:none; -webkit-appearance:none; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); font-size:13.5px; font-weight:600; padding:9px 34px 9px 36px; border-radius:11px; cursor:pointer; } .sort-wrap .material-symbols-outlined.chev{position:absolute; right:10px; font-size:18px; color:var(--color-text-faint); pointer-events:none;} .result-tag{font-size:12.5px; color:var(--color-text-faint); font-weight:500;} /* ===================== PRODUCT GRID / CARD (compartilhado) ===================== */ .product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;} .product-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); animation: cardIn .45s var(--ease) both; } @keyframes cardIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} } .product-card:hover{ border-color:var(--color-border-strong); transform:translateY(-3px); box-shadow: 0 14px 34px rgba(20,21,26,0.07); } .card-media{position:relative; aspect-ratio:4/3.2; overflow:hidden; background:var(--color-surface-alt);} .card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);} .product-card:hover .card-media img{transform:scale(1.055);} .card-badges{position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start;} .badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:5px 9px; border-radius:100px; letter-spacing:.2px; } .badge-discount{background:var(--color-badge-discount-bg); color:var(--color-badge-discount-text);} .badge-new{background:var(--color-info); color:#fff;} .badge-cat{background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); color:var(--color-text-dim); border:1px solid var(--color-border);} .badge-status-active{background:rgba(22,163,74,0.1); color:var(--color-success);} .badge-status-inactive{background:var(--color-surface-alt); color:var(--color-text-faint);} .badge-status-expired{background:var(--color-danger-soft); color:var(--color-danger);} .card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:4px; flex:1;} .card-brand{font-size:11px; font-weight:700; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.5px;} .card-name{ font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--color-text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px; } .card-prices{margin-top:5px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;} .card-old-price{font-size:12px; color:var(--color-text-faint); text-decoration:line-through;} .card-price{font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--color-primary); letter-spacing:-0.5px;} .card-store-row{display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--color-border);} .card-store{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--color-text-dim); font-weight:500;} .card-store .material-symbols-outlined{font-size:14px; color:var(--color-text-faint);} .card-go{width:28px; height:28px; border-radius:8px; background:var(--color-surface-alt); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-text-dim); transition: all .2s;} .card-go .material-symbols-outlined{font-size:16px;} .product-card:hover .card-go{background:var(--color-text); color:#fff; border-color:var(--color-text);} /* Empty / erro / skeleton states (compartilhados) */ .state-block{display:none; flex-direction:column; align-items:center; text-align:center; padding:70px 20px; grid-column:1/-1;} .state-block.show{display:flex;} .state-block .icon-wrap{ width:64px; height:64px; border-radius:50%; background:var(--color-surface-alt); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--color-text-faint); } .state-block.is-error .icon-wrap{background:var(--color-danger-soft); color:var(--color-danger); border-color:transparent;} .state-block .icon-wrap .material-symbols-outlined{font-size:28px;} .state-block h3{font-family:var(--font-display); font-size:17px; font-weight:800; margin-bottom:6px;} .state-block p{color:var(--color-text-dim); font-size:13.5px; max-width:300px; margin-bottom:18px; line-height:1.5;} .skeleton-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-m); overflow:hidden;} .skeleton-media{aspect-ratio:4/3.2; background:linear-gradient(90deg, var(--color-surface-alt) 25%, #e9e7e0 50%, var(--color-surface-alt) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite;} .skeleton-lines{padding:13px 14px;} .skeleton-line{height:11px; border-radius:6px; margin-bottom:8px; background:linear-gradient(90deg, var(--color-surface-alt) 25%, #e9e7e0 50%, var(--color-surface-alt) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite;} .skeleton-line.w-60{width:60%;} .skeleton-line.w-90{width:90%;} .skeleton-line.w-40{width:40%; height:20px; margin-top:12px;} @keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } /* ===================== WHATSAPP BANNER ===================== */ .wa-banner{padding:14px 0 46px;} .wa-inner{ border-radius:var(--radius-l); background:var(--color-text); color:var(--color-background); padding:34px 26px; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; } .wa-inner::before{ content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, var(--shadow-glow), transparent 70%); top:-120px; right:-80px; } .wa-top{display:flex; align-items:center; gap:14px; position:relative; z-index:1;} .wa-icon{width:50px; height:50px; border-radius:14px; background:var(--color-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .wa-icon .material-symbols-outlined{font-size:24px; color:#fff;} .wa-inner h3{font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-0.5px; position:relative; z-index:1;} .wa-inner p{color:#B7BAC2; font-size:14px; max-width:440px; position:relative; z-index:1; line-height:1.55;} .wa-inner .btn{width:fit-content; position:relative; z-index:1;} /* ===================== FOOTER ===================== */ .site-footer{border-top:1px solid var(--color-border); padding:38px 0 90px; background:var(--color-surface-alt);} .footer-grid{display:grid; grid-template-columns:1fr; gap:30px;} .footer-brand p{color:var(--color-text-dim); font-size:13px; margin-top:12px; line-height:1.65; max-width:320px;} .footer-col h4{font-family:var(--font-display); font-size:13px; font-weight:800; margin-bottom:14px; color:var(--color-text);} .footer-col ul{display:flex; flex-direction:column; gap:10px;} .footer-col a{font-size:13.5px; color:var(--color-text-dim); transition:color .2s;} .footer-col a:hover{color:var(--color-primary-dark);} .footer-social{display:flex; gap:8px; margin-top:16px;} .legal-note{margin-top:28px; padding-top:22px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-text-faint); line-height:1.65;} .legal-note strong{color:var(--color-text-dim);} .footer-bottom{margin-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--color-text-faint);} /* ===================== BOTTOM NAV (mobile) ===================== */ .bottom-nav{ position:fixed; bottom:0; left:0; right:0; z-index:150; display:flex; justify-content:space-around; align-items:center; background:rgba(0, 0, 0, 0.92); backdrop-filter:blur(16px); padding:9px 6px calc(9px + env(safe-area-inset-bottom)); } .bn-item{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--color-text-faint); font-size:10.5px; font-weight:600; padding:2px 12px; transition:color .2s;} .bn-item .material-symbols-outlined{font-size:22px;} .bn-item.active{color:var(--color-background);} .bn-item.active .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 22; color:var(--color-background);} /* ===================== TOAST ===================== */ .toast{ position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--color-text); color:#fff; padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:0 20px 50px rgba(0,0,0,0.2); z-index:400; opacity:0; pointer-events:none; transition:all .3s var(--ease); max-width:90vw; } .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} .toast.is-error{background:var(--color-danger);} .toast .material-symbols-outlined{font-size:17px; color:var(--color-accent);} .toast.is-error .material-symbols-outlined{color:#fff;} /* ===================== FORM ELEMENTS (compartilhado com admin/auth) ===================== */ .field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;} .field label{font-size:13px; font-weight:700; color:var(--color-text);} .field .hint{font-size:11.5px; color:var(--color-text-faint);} .field input, .field select, .field textarea{ border:1.5px solid var(--color-border); border-radius:11px; padding:11px 13px; font-size:14.5px; color:var(--color-text); background:var(--color-surface); transition:border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--color-text); box-shadow:0 0 0 3.5px rgba(20,21,26,0.06); } .field textarea{resize:vertical; min-height:90px;} .field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--color-danger);} .field-error{font-size:11.5px; color:var(--color-danger); display:none;} .field.has-error .field-error{display:block;} .field-row{display:grid; grid-template-columns:1fr; gap:14px;} .checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--color-text-dim); font-weight:600;} .checkbox-row input{width:16px; height:16px; accent-color:var(--color-accent);} @media (min-width:640px){ .product-grid{grid-template-columns:repeat(3,1fr); gap:18px;} .wa-inner{flex-direction:row; align-items:center; justify-content:space-between; padding:40px 42px;} .field-row.cols-2{grid-template-columns:1fr 1fr;} } @media (min-width:860px){ body{padding-bottom:0;} .bottom-nav{display:none;} .hide-mobile{display:inline-flex;} .hide-desktop{display:none;} .nav-links{display:flex;} .product-grid{grid-template-columns:repeat(4,1fr);} .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;} .site-footer{padding-bottom:56px;} } @media (min-width:1120px){ .product-grid{grid-template-columns:repeat(5,1fr);} } /* Botão Principal */ .account-btn { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-dim); transition: border-color .2s, color .2s, transform .15s; color: #333333; -webkit-tap-highlight-color: transparent; } /* Tamanho do Ícone */ .account-btn .material-symbols-outlined { font-size: 25px; transition: transform 0.2s ease; } /* Interatividade: Hover & Focus */ .account-btn:hover{border-color:var(--color-border-strong); color:var(--color-text); transform:translateY(-1px);} .account-btn:active{transform:scale(0.94);} .banner{ width: 100%; display: flex; align-items: center; justify-content: center; } .banner img{ max-height: 500px; } .carousel-container { position: relative; width: 100%; max-width: 100%; /* Ocupa 100% da tela para preencher as laterais */ margin: 0 auto; overflow: hidden; background-color: #000; /* Garante fundo escuro enquanto carrega */ } .carousel-track { display: flex; transition: transform 0.5s ease-in-out; width: 100%; } .carousel-slide { min-width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } /* Fundo desfocado usando pseudo-elemento */ .carousel-slide::before { content: ''; position: absolute; top: -10%; left: -10%; width: 120%; /* Levemente maior para o blur não cortar nas bordas */ height: 120%; background-image: var(--bg-img); background-size: cover; background-position: center; filter: blur(15px) brightness(0.4); /* Ajuste o desfoque e escurecimento */ z-index: 1; } /* Imagem principal por cima do fundo desfocado */ .carousel-slide img { position: relative; z-index: 2; width: 100%; max-width: 1200px; /* Mantém o tamanho ideal do banner no centro */ max-height: 500px; object-fit: contain; /* Preserva a proporção da imagem sem cortar */ display: block; } /* Bolinhas de paginação */ .carousel-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .dot { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background 0.3s; } .dot.active { background: white; }