/* Theme Name: The Service React Theme URI: https://seo.emp.br/leonardo-pederzoli Author: Leonardo Pederzoli Author URI: https://seo.emp.br Description: Tema The Service React premium baseado no Design System "Old School" (seo.emp.br) — fundo quase-preto em camadas, acento roxo único, tipografia editorial pesada. Estrutura modular com BLOCK comments em main.css, Alpine.js para interatividade, e overrides WooCommerce para catálogo/single/cart/checkout. Version: 1.4.3 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-service-react Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images, full-width-template, theme-options, threaded-comments, translation-ready */ /* ══════════════════════════════════════════════════════════════════════ DESIGN SYSTEM — "Old School" (seo.emp.br) — ver arquitetura/leonardoDesign.md Todos os componentes (em assets/css/main.css) consomem estes tokens via var(--token, fallback). NUNCA hardcode cor — sempre via token. FONTE DA VERDADE: valores extraídos diretamente de globals.css do projeto React real (painel-old-school, localhost:3000/src/app/globals.css) — não são mais uma interpretação/aproximação. Ver arquitetura/compatibilidade-cores.md §9 e leonardoDesign.md §2. CLARO é o padrão (:root) — igual ao projeto real ( hardcoded, localStorage fallback 'light', SEM checar prefers-color-scheme). ESCURO é o override, ativado via [data-theme="dark"] pelo toggle. Paleta fixa, travada — um acento roxo só (#7c3aed), igual nos dois temas. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Primitivos — TEMA CLARO (padrão, globals.css :root/.light) ────── */ --bg-base: #ffffff; /* fundo principal da página */ --bg-elevated: #f5f3ff; /* seções alternadas + chips (secondary/accent) */ --bg-card: #ffffff; /* card = background no claro */ --bg-image-ph: #f4f4f5; /* placeholder de imagem (muted) */ --bg-base-translucent: rgba(255,255,255,0.8); /* header sticky com blur */ --accent: #7c3aed; /* botões sólidos, bullets, barras, glow — primary */ --accent-soft: #7c3aed; /* SEM variante separada — projeto real usa --primary direto em links/hovers */ --accent-foreground: #3b0764; /* texto sobre chip --bg-elevated (secondary-foreground/accent-foreground) */ --accent-glow: rgba(124,58,237,0.18); --accent-ambient: rgba(124,58,237,0.05); --text-strong: #0f0a1e; /* foreground exato do projeto real */ --text-body: #71717a; /* muted-foreground exato (sólido, não opacidade) */ --text-muted: color-mix(in srgb, #71717a 70%, transparent); --text-faint: color-mix(in srgb, #71717a 50%, transparent); --text-ghost: color-mix(in srgb, #0f0a1e 6%, transparent); --hairline: #e4e4e7; /* border exato — sólido, não translúcido */ --hairline-2: #e4e4e7; /* Texto sobre SUPERFÍCIE CLARA hardcoded (toasts, inputs, cards brancos * isolados que não seguem o tema de propósito — ver * arquitetura/compatibilidade-cores.md). No tema claro coincide com * --text-strong; mantido como token à parte porque no ESCURO diverge * (ver bloco [data-theme="dark"] abaixo). */ --text-on-light: #0f0a1e; --text-on-light-muted: color-mix(in srgb, #0f0a1e 60%, transparent); /* ── Cores principais (alias legado — Tier 2 abaixo continua * funcionando sem edição, mas --color-secondary é ambíguo: serve tanto * de "fundo" quanto de "texto" no sistema antigo. Cada área reskinada * na Fase 1 troca esses usos por --text-strong/--accent diretamente. ) */ --color-primary: var(--accent); /* #7c3aed */ --color-primary-hover: #6d28d9; /* primary-600 — hover do botão sólido */ --color-secondary: var(--bg-elevated); --color-accent: var(--accent-soft); --color-surface: var(--bg-elevated); --color-bg: var(--bg-base); --color-text: var(--text-strong); --color-text-muted: var(--text-body); --color-border: var(--hairline); /* --color-primary-ink / --color-on-primary / --color-on-dark: antes só * existiam injetados em runtime por inc/ds-tokens.php (removido). São * usados como cor de HOVER/estado ativo em ~150 lugares do main.css — * definidos aqui como tokens estáticos de verdade. */ --color-primary-ink: var(--accent-soft); /* hover/active de texto */ /* FIXOS (não usam --text-strong) — o roxo do --accent e os overlays * escuros NÃO mudam de tom entre claro/escuro, então o texto em cima * também não pode mudar (senão vira texto escuro sobre roxo/escuro * no tema escuro — quebra o mesmo jeito que branco-sobre-branco quebra). */ --color-on-primary: #ffffff; /* texto sobre botão sólido (--accent) */ --color-on-dark: #ffffff; /* texto/ícone sobre overlay escuro fixo */ /* Tipografia — Inter, com as MESMAS font-feature-settings do projeto real * (cv02/cv03/cv04/cv11 — variações estilísticas, aplicadas no body abaixo). */ --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Tamanhos de fonte — escalas fluidas via clamp (leonardoDesign.md §3) */ --font-hero: clamp(2.5rem, 7vw, 5.5rem); /* h1 hero */ --font-h1: clamp(2rem, 5vw, 3.5rem); --font-h2: clamp(1.75rem, 4vw, 2.75rem); --font-h3: clamp(1.25rem, 2.4vw, 1.5rem); --font-h4: clamp(1.0625rem, 2vw, 1.25rem); --font-big-number: clamp(3rem, 8vw, 5rem); --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) — mantido em 1500px por * decisão deliberada: o projeto real usa --layout-max-width:72rem * (1152px), mas estreitar o container aqui afetaria grids de produto/ * shop já ajustados nesta sessão. Fora do escopo pedido (cor+tipografia). * Token de referência disponível abaixo pra quem quiser adotar 72rem. */ --container-max: min(1500px, 96vw); --container-padding: clamp(12px, 2.5vw, 28px); --layout-max-width-ref: 72rem; /* valor real do projeto React, não aplicado ao --container-max por ora */ /* Bordas arredondadas — radius real do projeto (0.5rem base, shadcn). * Botões continuam pílula (regra de forma travada da Old School); * cards/inputs/badges usam a escala 4/6/8/12 do projeto real. */ --radius-base: 0.5rem; /* 8px — --radius do globals.css */ --rounded-sm: 4px; /* calc(0.5rem - 4px) */ --rounded-md: 6px; /* calc(0.5rem - 2px) */ --rounded-lg: 8px; /* = --radius-base */ --rounded-xl: 12px; /* calc(0.5rem + 4px) */ --rounded-full: 9999px; /* botões — pílula, sem exceção */ /* Sombras — LEGADAS (sombra preta), mantidas só pra áreas ainda não * reskinadas. Zero sombra preta nova: usar --shadow-glow (roxo tingido). */ --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); --shadow-glow: 0 0 40px var(--accent-glow); /* 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: #ef4444; /* = --destructive exato do projeto real */ --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 um primitivo Old School — texto * SEMPRE em --text-*/--accent-soft, fundo SEMPRE em --bg-*, borda * SEMPRE em --hairline*. Não usar --color-secondary aqui (ambíguo). * ══════════════════════════════════════════════════════════════════ */ /* Header */ --color-header-bg: var(--bg-base); --color-header-text: var(--text-strong); --color-header-hover: var(--accent); --color-header-border: var(--hairline); --color-topbar-bg: var(--bg-elevated); --color-topbar-text: var(--text-strong); /* Mega Menu */ --color-megamenu-bg: var(--bg-elevated); --color-megamenu-link: var(--text-body); --color-megamenu-link-hover: var(--accent-soft); /* também alimenta --twp-nav-accent (underline + estado ativo) */ --color-megamenu-dropdown-bg: var(--bg-elevated); --color-megamenu-dropdown-link: var(--text-body); --color-megamenu-dropdown-hover: var(--accent-soft); --color-megamenu-col-title: var(--text-strong); /* Footer */ --color-footer-bg: var(--bg-elevated); --color-footer-text: var(--text-body); --color-footer-link: var(--accent-soft); --color-footer-link-hover: var(--text-strong); --color-footer-heading: var(--text-strong); --color-footer-border: var(--hairline); --color-footer-bottom-bg: var(--bg-base); /* Blog (cards + hero + author) */ --color-blog-hero-bg: var(--bg-elevated); --color-blog-hero-text: var(--text-strong); --color-blog-hero-accent: var(--accent-soft); --color-blog-card-bg: var(--bg-elevated); --color-blog-card-border: var(--hairline-2); --color-blog-card-title: var(--text-strong); --color-blog-card-hover: var(--accent-soft); /* Single post */ --color-single-hero-bg: var(--bg-elevated); --color-single-hero-text: var(--text-strong); --color-single-content: var(--text-body); --color-single-link: var(--accent-soft); --color-single-blockquote: var(--accent-soft); --color-single-toc-active: var(--accent-soft); /* Loja (archive-product) */ --color-shop-hero-bg: var(--bg-elevated); --color-shop-filter-bg: var(--bg-elevated); --color-shop-chip-active: var(--accent); --color-shop-apply-btn: var(--accent); --color-shop-card-bg: var(--bg-elevated); --color-shop-card-border: var(--hairline-2); --color-shop-price: var(--text-strong); --color-shop-sale-badge-bg: var(--color-danger); --color-shop-sale-badge-text: var(--text-strong); --color-shop-stock-in: var(--color-success); --color-shop-stock-out: var(--text-muted); --color-shop-pagination-active: var(--accent); /* Produto (single-product) */ --color-product-buy-btn: var(--accent); /* Branco fixo sobre o botão roxo — mesma correção de contraste do --color-btn-primary-text (ver "Botões globais" abaixo). */ --color-product-buy-btn-text: var(--color-on-primary); --color-product-buy-btn-hover: var(--color-primary-hover); --color-product-pix-card-bg: var(--bg-elevated); --color-product-pix-accent: var(--accent); --color-product-tabs-active: var(--accent-soft); --color-product-meta-label: var(--text-muted); --color-product-share-btn: var(--hairline); /* Cart & Checkout */ --color-cart-sidebar-bg: var(--bg-elevated); --color-cart-total-text: var(--text-strong); --color-cart-total-accent: var(--accent-soft); --color-cart-checkout-btn: var(--accent); --color-cart-qty-btn: var(--text-body); /* borda + ícone — hover usa --accent direto no main.css, não este token */ --color-cart-remove: var(--color-danger); --color-cart-pix-highlight: var(--accent-soft); /* Botões globais */ --color-btn-primary-bg: var(--accent); /* Texto sobre botão primário = branco FIXO (--color-on-primary), nunca --text-strong: o fundo é --accent (roxo constante nos dois temas), então texto que segue o tema fica quase-preto no claro = contraste ruim sobre o roxo. Mesma classe de bug documentada em compatibilidade-cores.md ("fundo que não inverte + texto que segue o tema = contraste quebrado"). Cobre AVANÇAR (cart) e FINALIZAR PEDIDO (#place_order.commerce-cta). */ --color-btn-primary-text: var(--color-on-primary); --color-btn-primary-hover: var(--color-primary-hover); --color-btn-secondary-bg: var(--bg-elevated); --color-btn-secondary-text: var(--text-strong); --color-btn-whatsapp-bg: #25D366; --color-btn-danger-bg: var(--color-danger); /* Formulários */ --color-form-input-bg: var(--bg-elevated); --color-form-input-text: var(--text-strong); --color-form-input-border: var(--hairline); --color-form-input-focus: var(--accent); --color-form-label: var(--text-muted); --color-form-placeholder: var(--text-faint); --color-form-error: var(--color-danger); /* Painel do Cliente (My Account) — sidebar nav */ --color-account-sidebar-bg: var(--bg-elevated); --color-account-sidebar-link: var(--text-body); --color-account-sidebar-link-hover: var(--accent-soft); --color-account-sidebar-active-bg: var(--accent); --color-account-sidebar-active-text: var(--text-strong); --color-account-sidebar-border: var(--hairline); /* Painel do Cliente — hero do dashboard (tema agora é dark em toda parte, não só em zonas isoladas — hero herda bg-base + texto branco). */ --color-account-hero-bg: var(--bg-base); --color-account-hero-text: var(--text-strong); --color-account-hero-eyebrow: var(--accent-soft); /* Painel do Cliente — stats (números totais) */ --color-account-stat-value: var(--accent-soft); --color-account-stat-label: var(--text-muted); /* Painel do Cliente — cards de atalho */ --color-account-card-bg: var(--bg-elevated); --color-account-card-border: var(--hairline); --color-account-card-hover-border: var(--accent); --color-account-card-icon-bg: var(--bg-card); --color-account-card-icon-color: var(--accent-soft); --color-account-card-title: var(--text-strong); --color-account-card-desc: var(--text-muted); --color-account-card-arrow: var(--accent-soft); /* Painel do Cliente — lista de pedidos */ --color-account-order-bg: var(--bg-elevated); --color-account-order-border: var(--hairline); --color-account-order-number: var(--text-strong); --color-account-order-date: var(--text-muted); --color-account-order-total: var(--accent-soft); --color-account-order-link: var(--accent-soft); /* 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(--bg-elevated); --color-account-address-border: var(--hairline); --color-account-address-title: var(--text-strong); --color-account-address-text: var(--text-muted); --color-account-address-edit-btn: var(--accent-soft); /* Painel do Cliente — estado vazio */ --color-account-empty-bg: var(--bg-elevated); --color-account-empty-text: var(--text-muted); } /* ══════════════════════════════════════════════════════════════════════ TEMA ESCURO — [data-theme="dark"] no , alternado pelo toggle do header (ver assets/js/main.js + inc/theme-toggle.php). Só sobrescreve os PRIMITIVOS (§ acima). Os ~100 tokens Tier-2 e todo o assets/css/main.css consomem os primitivos via var(--x) — herdam a troca automaticamente, sem precisar duplicar nada aqui. Valores exatos de globals.css .dark do projeto real. --accent-soft continua igual a --accent (sem variante separada, mesma decisão do claro). --text-on-light/--text-on-light-muted NÃO são redefinidos aqui — são pra componentes de fundo BRANCO hardcoded (toasts, inputs isolados) que não mudam de cor com o tema, então o texto em cima também tem que ficar fixo. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-base: #0a0a0f; --bg-elevated: #16163a; /* secondary/accent do projeto real */ --bg-card: #0e0e16; --bg-image-ph: #13131c; /* muted */ --bg-base-translucent: rgba(10,10,15,0.8); --accent: #7c3aed; --accent-soft: #7c3aed; --accent-foreground: #c4b5fd; /* secondary-foreground/accent-foreground do projeto real */ --accent-glow: rgba(124,58,237,0.25); --accent-ambient: rgba(124,58,237,0.07); --text-strong: #f0f0f8; /* foreground exato — não é branco puro */ --text-body: #7878a0; /* muted-foreground exato (sólido) */ --text-muted: color-mix(in srgb, #7878a0 70%, transparent); --text-faint: color-mix(in srgb, #7878a0 50%, transparent); --text-ghost: color-mix(in srgb, #f0f0f8 8%, transparent); --hairline: #1e1e2e; /* border exato — sólido */ --hairline-2: #1e1e2e; --color-primary-hover: #8b5cf6; /* violet-500 — mais claro no hover sobre fundo escuro */ --color-danger: #ef4444; /* = --destructive (mesmo valor nos dois temas) */ } /* ══════════════════════════════════════════════════════════════════════ 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, #0f0a1e); background: var(--color-bg, #ffffff); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Mesmas font-feature-settings do projeto real (globals.css) — variações * estilísticas do Inter que dão um ar mais refinado à tipografia. */ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; font-weight: 700; line-height: 1.2; } a { color: var(--accent-soft, #7c3aed); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--color-primary-hover, #6d28d9); } 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. */