/* Theme Name: The Woo Premium Theme URI: https://seo.emp.br/leonardo-pederzoli Author: Leonardo Pederzoli Author URI: https://seo.emp.br Description: Tema WooCommerce premium baseado no Design System Legado (Starbucks-inspired). Estrutura modular com BLOCK comments em main.css, Alpine.js para interatividade, e overrides WooCommerce para catálogo/single/cart/checkout. Version: 8.8.6 Requires at least: 6.0 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: the-woo-premium Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images, full-width-template, theme-options, threaded-comments, translation-ready */ /* ══════════════════════════════════════════════════════════════════════ DESIGN SYSTEM — Starbucks-inspired (porte do Legado public) Todos os componentes (em assets/css/main.css) consomem estes tokens via var(--token, fallback). NUNCA hardcode cor — sempre via token. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Cores principais */ --color-primary: #E22421; /* verde Starbucks */ --color-primary-hover: #000000; --color-secondary: #000000; /* verde escuro profundo */ --color-accent: #FFFFFF; /* dourado / accent */ --color-surface: #F8F8F8; /* off-white quente (background secundário) */ --color-bg: #FFFFFF; /* background primário */ --color-text: #000000; /* texto principal */ --color-text-muted: #565758; /* texto secundário (marrom suave) */ --color-border: #E5E5E5; /* bordas / linhas (dourado claro) */ /* Tipografia — Inter é a fonte oficial (Google Fonts enqueued). * Mantém SoDoSans/system-ui como fallback caso Inter falhe. */ --font-heading: 'Inter', 'SoDoSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', 'SoDoSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Tamanhos de fonte (escalas fluidas via clamp) */ --font-h1: clamp(2rem, 4.5vw, 3rem); --font-h2: clamp(1.625rem, 3.2vw, 2.25rem); --font-h3: clamp(1.25rem, 2.4vw, 1.5rem); --font-h4: clamp(1.0625rem, 2vw, 1.25rem); --font-body-md: 1rem; --font-body-sm: 0.875rem; --font-label: 0.75rem; /* Espaçamentos (tokens DS) */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 3rem; /* 48px */ --spacing-section: clamp(2.5rem, 6vw, 5rem); --spacing-gutter: 1.5rem; /* Container global (novo padrão Legado v1.47.9) */ --container-max: min(1500px, 96vw); --container-padding: clamp(12px, 2.5vw, 28px); /* Bordas arredondadas (usadas com moderação — design tende a quadrado) */ --rounded-sm: 4px; --rounded-md: 8px; --rounded-lg: 12px; --rounded-full: 50px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14); /* Z-index layers (hierarquia explícita pra evitar conflitos) */ --z-base: 1; --z-sticky: 10; --z-dropdown: 50; --z-whatsapp: 40; --z-overlay: 100; --z-drawer: 200; --z-modal: 500; --z-lightbox: 10000; /* ══════════════════════════════════════════════════════════════════ * SEMANTIC PALETTE — Estados (danger/success/warning/info) * Consumidos por badges, alerts, validação de form, sale price, etc. * ══════════════════════════════════════════════════════════════════ */ --color-danger: #E22421; /* sale, erro, ações destrutivas */ --color-success: #10B981; /* em estoque, confirmação */ --color-warning: #F59E0B; /* atenção, low-stock */ --color-info: #2563EB; /* tooltip, info */ /* ══════════════════════════════════════════════════════════════════ * COMPONENT TOKENS — Tier 2 * Cada token aponta por DEFAULT para uma palette base. ACF pode * sobrescrever individualmente via [inc/acf-design-system.php] → * [inc/ds-tokens.php] sem precisar mexer no CSS. * ══════════════════════════════════════════════════════════════════ */ /* Header */ --color-header-bg: var(--color-bg); --color-header-text: var(--color-secondary); --color-header-hover: var(--color-primary); --color-header-border: var(--color-border); --color-topbar-bg: var(--color-secondary); --color-topbar-text: #FFFFFF; /* Mega Menu */ --color-megamenu-bg: var(--color-secondary); --color-megamenu-link: #FFFFFF; --color-megamenu-link-hover: var(--color-accent); --color-megamenu-dropdown-bg: var(--color-bg); --color-megamenu-dropdown-link: var(--color-secondary); --color-megamenu-dropdown-hover: var(--color-primary); /* Footer */ --color-footer-bg: var(--color-secondary); --color-footer-text: #F8F8F8; --color-footer-link: var(--color-accent); --color-footer-link-hover: #FFFFFF; --color-footer-heading: #FFFFFF; --color-footer-border: #565758; --color-footer-bottom-bg: #000000; /* Blog (cards + hero + author) */ --color-blog-hero-bg: var(--color-secondary); --color-blog-hero-text: #FFFFFF; --color-blog-hero-accent: var(--color-accent); --color-blog-card-bg: var(--color-bg); --color-blog-card-border: var(--color-border); --color-blog-card-title: var(--color-secondary); --color-blog-card-hover: var(--color-primary); /* Single post */ --color-single-hero-bg: var(--color-secondary); --color-single-hero-text: #FFFFFF; --color-single-content: var(--color-text); --color-single-link: var(--color-primary); --color-single-blockquote: var(--color-accent); --color-single-toc-active: var(--color-primary); /* Loja (archive-product) */ --color-shop-hero-bg: var(--color-secondary); --color-shop-filter-bg: var(--color-surface); --color-shop-chip-active: var(--color-primary); --color-shop-apply-btn: var(--color-primary); --color-shop-card-bg: var(--color-bg); --color-shop-card-border: var(--color-border); --color-shop-price: var(--color-secondary); --color-shop-sale-badge-bg: var(--color-danger); --color-shop-sale-badge-text: #FFFFFF; --color-shop-stock-in: var(--color-success); --color-shop-stock-out: var(--color-text-muted); --color-shop-pagination-active: var(--color-primary); /* Produto (single-product) */ --color-product-buy-btn: var(--color-primary); --color-product-buy-btn-text: #FFFFFF; --color-product-buy-btn-hover: var(--color-secondary); --color-product-pix-card-bg: var(--color-surface); --color-product-pix-accent: var(--color-primary); --color-product-tabs-active: var(--color-primary); --color-product-meta-label: var(--color-text-muted); --color-product-share-btn: var(--color-border); /* Cart & Checkout */ --color-cart-sidebar-bg: var(--color-surface); --color-cart-total-text: var(--color-secondary); --color-cart-total-accent: var(--color-primary); --color-cart-checkout-btn: var(--color-primary); --color-cart-qty-btn: var(--color-secondary); --color-cart-remove: var(--color-danger); --color-cart-pix-highlight: var(--color-primary); /* Botões globais */ --color-btn-primary-bg: var(--color-primary); --color-btn-primary-text: #FFFFFF; --color-btn-primary-hover: var(--color-secondary); --color-btn-secondary-bg: var(--color-bg); --color-btn-secondary-text: var(--color-secondary); --color-btn-whatsapp-bg: #25D366; --color-btn-danger-bg: var(--color-danger); /* Formulários */ --color-form-input-bg: var(--color-bg); --color-form-input-text: var(--color-secondary); --color-form-input-border: var(--color-border); --color-form-input-focus: var(--color-primary); --color-form-label: var(--color-text-muted); --color-form-placeholder: var(--color-text-muted); --color-form-error: var(--color-danger); /* Painel do Cliente (My Account) — sidebar nav */ --color-account-sidebar-bg: var(--color-surface); --color-account-sidebar-link: var(--color-secondary); --color-account-sidebar-link-hover: var(--color-primary); --color-account-sidebar-active-bg: var(--color-primary); --color-account-sidebar-active-text: #FFFFFF; --color-account-sidebar-border: var(--color-border); /* Painel do Cliente — hero do dashboard */ --color-account-hero-bg: var(--color-secondary); --color-account-hero-text: #FFFFFF; --color-account-hero-eyebrow: var(--color-accent); /* Painel do Cliente — stats (números totais) */ --color-account-stat-value: #FFFFFF; --color-account-stat-label: var(--color-accent); /* Painel do Cliente — cards de atalho */ --color-account-card-bg: var(--color-bg); --color-account-card-border: var(--color-border); --color-account-card-hover-border: var(--color-primary); --color-account-card-icon-bg: var(--color-surface); --color-account-card-icon-color: var(--color-primary); --color-account-card-title: var(--color-secondary); --color-account-card-desc: var(--color-text-muted); --color-account-card-arrow: var(--color-primary); /* Painel do Cliente — lista de pedidos */ --color-account-order-bg: var(--color-bg); --color-account-order-border: var(--color-border); --color-account-order-number: var(--color-secondary); --color-account-order-date: var(--color-text-muted); --color-account-order-total: var(--color-primary); --color-account-order-link: var(--color-primary); /* Painel do Cliente — badges de status do pedido */ --color-account-status-processing-bg: var(--color-warning); --color-account-status-processing-text: #FFFFFF; --color-account-status-completed-bg: var(--color-success); --color-account-status-completed-text: #FFFFFF; --color-account-status-cancelled-bg: var(--color-danger); --color-account-status-cancelled-text: #FFFFFF; --color-account-status-pending-bg: var(--color-info); --color-account-status-pending-text: #FFFFFF; /* Painel do Cliente — cards de endereço */ --color-account-address-bg: var(--color-bg); --color-account-address-border: var(--color-border); --color-account-address-title: var(--color-secondary); --color-account-address-text: var(--color-text-muted); --color-account-address-edit-btn: var(--color-primary); /* Painel do Cliente — estado vazio */ --color-account-empty-bg: var(--color-surface); --color-account-empty-text: var(--color-text-muted); } /* ══════════════════════════════════════════════════════════════════════ RESET MÍNIMO (o resto vive em assets/css/main.css por BLOCK) ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--font-body-md); line-height: 1.55; color: var(--color-text, #000000); background: var(--color-bg, #FFFFFF); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary, #E22421); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--color-secondary, #000000); } button { font-family: inherit; cursor: pointer; } input, button, textarea, select { font: inherit; } /* Esconder elementos só pra leitores de tela (a11y) */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Honra preferência de movimento reduzido (a11y) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Alpine cloak — esconde até Alpine hidratar */ [x-cloak] { display: none !important; } /* * Todos os componentes (header, footer, page-hero, breadcrumb, listing, * product cards, cart, slider, etc) vivem em assets/css/main.css, * organizados por blocos: BLOCK:nome:START ... BLOCK:nome:END * * style.css fica reservado para metadata + DS tokens + reset mínimo. */