/* ========================================================================== GARIMPO SKIRA — Tema "Brechó / Vintage" (garimposkira.shop) -------------------------------------------------------------------------- Override 100% CSS, sem tocar em JS/React/backend. Objetivo: fugir do visual "TikTok Shop" e dar identidade própria de brechó, com cara de vitrine / marketplace simples e bonito, mobile-first. Arquivo carregado por último no , então ganha dos CSS do build. ========================================================================== */ /* ---------- Tipografia vintage ---------- */ :root { --font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Poppins", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- Paleta vintage / brechó ---------- */ :root { --color-primary: #a05a3c; /* terracota queimado */ --color-primary-dark: #7d4429; --color-primary-light: #c07b55; --color-secondary: #7a5c4a; --color-accent: #c8a15a; /* dourado vintage */ --color-review-star-color: #c8a15a; --color-background: #fffdf7; /* creme papel */ --color-background-alt: #f6eee1; /* creme quente */ --color-background-light: #f2e9d9; --color-surface: #fdf3e3; --color-text-primary: #3f2e22; /* marrom envelhecido */ --color-text-secondary: #7a6a5c; --color-text-tertiary: #9c8a7a; --color-text-light: #a99a8a; --color-text-white: #fffdf7; --color-border-light: #e6d9c3; --color-border-medium: #cbb89a; --color-error: #a0522d; --color-error-light: #f4dfd1; --color-success: #6d8b4f; --color-avatar-gradient: linear-gradient(135deg, #c07b55, #a05a3c); --shadow-card: 0 1px 2px rgba(63, 46, 34, 0.06), 0 4px 14px rgba(63, 46, 34, 0.05); --shadow-bottom-nav: 0 -2px 12px rgba(63, 46, 34, 0.08); } /* ========================================================================== 1) FUNDO GERAL ========================================================================== */ html { background-color: var(--color-background-light); } body { background-color: var(--color-background-light); color: var(--color-text-primary); font-family: var(--font-family); } #root { background-color: var(--color-background-light); } .container { background: var(--color-background); } /* ========================================================================== 2) HEADER — vira uma faixa simples de brechó, sem "perfil TikTok" ========================================================================== */ .header { background: var(--color-background); border-bottom: 1px solid var(--color-border-light); padding: 10px var(--spacing-lg); box-shadow: 0 1px 0 rgba(63, 46, 34, 0.04); } .header-search { background: var(--color-background-alt); border: 1px solid var(--color-border-light); border-radius: 999px; padding-left: 42px; } .header-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(160, 90, 60, 0.12); } .header-search-icon-btn { color: var(--color-text-secondary); } /* ========================================================================== 3) VITRINE DA LOJA — vira um "banner" de brechó, escondendo o perfil TikTok ========================================================================== */ /* Esconde os botões "Seguir" e "Mensagem" — pura identidade TikTok. Continuam no DOM (interação React intacta), só não são exibidos. */ .store-buttons { display: none !important; } .store-section { background: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(255, 253, 247, 0.6)), url("data:image/svg+xml;utf8,✂"); background-size: cover; border-bottom: 1px solid var(--color-border-light); padding: 20px 17px 18px; margin-top: 55px; } .store-left { gap: var(--spacing-md); } .store-logo { background: var(--color-background-alt); border: 2px solid var(--color-border-light); border-radius: 18px; box-shadow: var(--shadow-card); } .store-info h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); } .store-info p { font-size: 13px; color: var(--color-text-tertiary); } /* ========================================================================== 4) ABAS E FILTROS — escondidos (layout TikTok). Fica só a grade. ========================================================================== */ .nav-tabs { display: none !important; } .filter-chips { display: none !important; } /* ========================================================================== 5) GRADE DE PRODUTOS — vitrine estilo Shopify / brechó ========================================================================== */ .product-list { padding: var(--spacing-md); background: var(--color-background-light); } .product-list-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } /* Card estilo loja física: foto grande, nome, preço, botão discreto */ .product-card { border: 1px solid var(--color-border-light); border-radius: 14px; overflow: hidden; background: var(--color-background); box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .product-card:active { transform: scale(0.985); } .product-card-grid { flex-direction: column; margin-bottom: 0; min-width: 0; } .product-card-grid .product-image { border-radius: 14px 14px 0 0; aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; background: var(--color-background-alt); } .product-card-grid .product-info { padding: 10px 12px 12px; } .product-card-grid .product-name { font-size: 0.9rem; font-weight: 600; line-height: 1.3; min-height: 2.6em; color: var(--color-text-primary); } .product-badges { margin-bottom: 6px; } .product-badge-discount { background: #f7e3d3; color: var(--color-primary-dark); font-weight: 700; border-radius: 999px; padding: 2px 8px; } .product-badge { background: #e8e2cf; color: var(--color-success); font-weight: 600; border-radius: 999px; padding: 2px 8px; } .product-sales { color: var(--color-text-tertiary); } /* Preço com destaque */ .product-card-grid .product-price-section { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } .product-card-grid .current-price { font-size: 1.15rem; font-weight: 800; color: var(--color-primary-dark); } .product-card-grid .old-price { font-size: 0.75rem; } .current-price .currency { font-size: 0.65em; } /* Botão de compra discreto, estilo "adicionar à sacola" */ .product-card-grid .product-actions { width: 100%; } .product-card-grid .add-to-cart-btn { border-radius: 999px; border: 1px solid var(--color-primary); width: 38px; height: 38px; min-width: 38px; padding: 0; background: var(--color-background); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .product-card-grid .add-to-cart-btn svg { color: var(--color-primary); } .product-card-grid .buy-btn { border-radius: 999px; background: var(--color-primary); color: var(--color-text-white); font-size: 0.85rem; font-weight: 700; padding: 10px; flex: 1; display: inline-flex; align-items: center; justify-content: center; } .product-card-grid .buy-btn:hover { background: var(--color-primary-dark); } /* Lista (view toggle "linha") também ganha visual brechó */ .product-card { border: 1px solid var(--color-border-light); } .product-image { border-radius: 12px; } .current-price { color: var(--color-primary-dark); } .old-price { color: var(--color-text-light); } .add-to-cart-btn { background: #f7e3d3; color: var(--color-primary-dark); border: 1px solid var(--color-primary); border-radius: 999px 0 0 999px; } .add-to-cart-btn svg { color: var(--color-primary-dark); } .buy-btn { background: var(--color-primary); color: var(--color-text-white); border-radius: 0 999px 999px 0; } .buy-btn:hover { background: var(--color-primary-dark); } /* ========================================================================== 6) AVALIAÇÕES ========================================================================== */ .review-card { background: var(--color-background); border: 1px solid var(--color-border-light); border-radius: 14px; box-shadow: var(--shadow-card); } .review-user-name { color: var(--color-text-primary); } .review-star-icon { fill: var(--color-review-star-color); } /* ========================================================================== 7) BOTÕES GERAIS ========================================================================== */ .cart-checkout-btn, .modal-add-to-cart-btn, .checkout-continue-btn, .checkout-finish-btn, .sucesso-btn-primary, .pix-payment-copy-btn { background: var(--color-primary); border-radius: 999px; color: var(--color-text-white); font-weight: 700; } .cart-checkout-btn:hover, .modal-add-to-cart-btn:hover, .checkout-continue-btn:hover, .pix-payment-copy-btn:hover { background: var(--color-primary-dark); } .sucesso-btn-secondary { border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 999px; background: transparent; } /* ========================================================================== 8) CARRINHO ========================================================================== */ .cart-footer { background: var(--color-background); border-top: 1px solid var(--color-border-light); } .cart-footer-price { color: var(--color-primary-dark); } .cart-checkbox:checked { background: var(--color-primary); border-color: var(--color-primary); } .cart-item-current-price { color: var(--color-primary-dark); } .cart-item-variation-btn { background: var(--color-background-alt); } /* ========================================================================== 9) CHECKOUT ========================================================================== */ .checkout-container { background: var(--color-background-light); } .checkout-header { background: var(--color-background); border-bottom: 1px solid var(--color-border-light); } .checkout-cart-summary, .checkout-form-section { background: var(--color-background); } .checkout-summary-card { background: var(--color-background); border: 1px solid var(--color-border-light); } .checkout-form-input { border: 2px solid var(--color-border-light); background: var(--color-background); } .checkout-form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(160, 90, 60, 0.12); } .checkout-payment-option.selected, .checkout-shipping-option.selected { border-color: var(--color-primary); background: #f9ecdc; } .checkout-step.active .checkout-step-number { background: var(--color-primary); border-color: var(--color-primary); } .checkout-footer { background: var(--color-background); border-top: 1px solid var(--color-border-light); } .checkout-footer-total { color: var(--color-primary-dark); } /* ========================================================================== 10) PIX ========================================================================== */ .pix-payment-container { background: var(--color-background-light); } .pix-payment-header { background: var(--color-background); box-shadow: var(--shadow-card); } .pix-payment-card { background: var(--color-background); border: 1px solid var(--color-border-light); } .pix-payment-savings { background: #f7e3d3; color: var(--color-primary-dark); } .pix-payment-footer { background: var(--color-background); border-top: 1px solid var(--color-border-light); } .pix-payment-footer-total { color: var(--color-primary-dark); } /* ========================================================================== 11) SUCESSO ========================================================================== */ .sucesso-container { background: linear-gradient(160deg, #c07b55 0%, #a05a3c 45%, #7d4429 100%); } .sucesso-content { background: var(--color-background); border-radius: 20px; border: 1px solid var(--color-border-light); } /* ========================================================================== 12) NAVEGAÇÃO INFERIOR — barra discreta de brechó (sem ícone TikTok) ========================================================================== */ .bottom-nav { background: var(--color-background); border-top: 1px solid var(--color-border-light); box-shadow: var(--shadow-bottom-nav); } .nav-icon-svg { stroke: var(--color-text-secondary); } .nav-item.active .nav-icon-svg { stroke: var(--color-primary-dark); } .nav-item.active { color: var(--color-primary-dark); } .nav-add-cart-btn { background: #f7e3d3; } .nav-cart-icon { stroke: var(--color-primary-dark); } .nav-buy-now-btn { background: var(--color-primary); border-radius: 999px; } .nav-buy-now-btn:hover { background: var(--color-primary-dark); } /* ========================================================================== 13) MODAIS ========================================================================== */ .modal-content { background: var(--color-background); } .modal-product-discount { background: var(--color-primary); } .modal-product-price { color: var(--color-primary-dark); } .variation-color-btn.selected, .variation-option-btn.selected { border-color: var(--color-primary); } .variation-option-btn.selected { color: var(--color-primary-dark); } .modal-qty-btn { color: var(--color-text-primary); } .modal-quantity-controls { background: var(--color-background-alt); } /* ========================================================================== 14) BUSCA ========================================================================== */ .search-modal { background: var(--color-background); } .search-modal-input { border: 2px solid var(--color-primary); background: var(--color-background); } /* ========================================================================== 15) CUPONS ========================================================================== */ .coupon-card { border: 1px dashed var(--color-border-medium); background: var(--color-background-alt); } .coupon-btn { background: var(--color-primary); color: var(--color-text-white); border-radius: 999px; } .coupon-title { color: var(--color-text-primary); } /* ========================================================================== 16) FRETE / DESCONTOS ========================================================================== */ .cart-free-shipping-banner { background: #e8e2cf; } .cart-free-shipping-banner span { color: var(--color-success); } .checkout-shipping-note { background: #e8e2cf; border-left: 3px solid var(--color-success); color: var(--color-success); } .checkout-discount-row { background: #f9ecdc; } /* ========================================================================== 17) TOQUES FINAIS — "não deixar com cara de IA" ========================================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--color-border-medium); border-radius: 3px; } /* Textos de apoio usam a paleta */ .store-info p, .product-sales, .rating-count { color: var(--color-text-tertiary); } /* Cabeçalhos internos */ .cart-header-title, .checkout-title, .pix-payment-title, .modal-product-name, .sucesso-title { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--color-text-primary); }