/* ============================================================ theme-config.css — Magnaverso Base v2.0 — 2025-05-11 — tokens completos: fontes, cores, backgrounds, gradientes ESTE É O ÚNICO ARQUIVO QUE MUDA ENTRE CHILD THEMES. Para criar um novo tema: redefina apenas as variáveis abaixo. Todo CSS estrutural permanece nos arquivos próprios de cada página. Ordem de enqueue: PRIMEIRO, antes de qualquer outro CSS do tema. ============================================================ */ :root { /* ────────────────────────────────────────────────────────── FONTES — altere aqui para trocar toda a tipografia do site Inclua sempre fallbacks seguros na mesma categoria. ────────────────────────────────────────────────────────── */ /* Títulos e seções de destaque */ --mgv-font-display: 'Oswald', Arial Narrow, Arial, sans-serif; /* Corpo geral, parágrafos, labels */ --mgv-font-body: 'Roboto Condensed', Arial Narrow, Arial, sans-serif; /* Títulos decorativos (Story Script) */ --mgv-font-decorative: 'Story Script', Georgia, serif; /* Acentos especiais (Knewave) */ --mgv-font-script: 'Knewave', Georgia, serif; /* Títulos cursivos (Ms Madi) — loja, encomenda */ --mgv-font-cursive: 'Story Script', Georgia, serif; /* Páginas de compra: carrinho, checkout, myaccount, thankyou, encomenda Estilo sóbrio intencional — separado do estilo editorial do tema */ --mgv-font-commerce: 'Roboto Condensed', Arial Narrow, Arial, sans-serif; /* ────────────────────────────────────────────────────────── PALETA — cores base do tema ────────────────────────────────────────────────────────── */ --mgv-color-primary: #032D38; /* verde escuro — header, footer */ --mgv-color-primary-mid: #0C6654; /* verde médio — hovers, badges */ --mgv-color-primary-light: #19755c; /* verde claro — bordas, acentos */ --mgv-color-secondary: #0AA3A3; /* teal — CTAs, links ativos */ --mgv-color-accent: #16878c; /* teal escuro — faixas de título */ --mgv-color-bg: #EDF7F2; /* fundo geral */ --mgv-color-bg-alt: #f4faf7; /* fundo alternativo */ --mgv-color-surface: #ffffff; /* cards, modais */ /* ────────────────────────────────────────────────────────── TEXTOS ────────────────────────────────────────────────────────── */ --mgv-text: #1a2e22; /* texto principal */ --mgv-text-muted: #4A8A73; /* secundário, placeholders */ --mgv-title: #FAFFC9; /* títulos sobre fundo escuro */ /* ────────────────────────────────────────────────────────── E-COMMERCE ────────────────────────────────────────────────────────── */ --mgv-price-color: #0B7527; --mgv-sale-color: #e53935; --mgv-badge-sale-bg: #FFEFA6; --mgv-badge-new-bg: #9BE7A6; /* ────────────────────────────────────────────────────────── COMPONENTES — raios, sombras ────────────────────────────────────────────────────────── */ --mgv-radius-sm: 6px; --mgv-radius-md: 10px; --mgv-radius-lg: 14px; --mgv-shadow: -2px 2px 6px rgba(0,0,0,.18); --mgv-shadow-soft: -2px 2px 6px rgba(0,0,0,.12); /* ────────────────────────────────────────────────────────── BOTÕES ────────────────────────────────────────────────────────── */ --mgv-btn-bg: #0AA3A3; --mgv-btn-a: #0AA3A3; --mgv-btn-b: #19755c; --mgv-btn-border: #16878c; --mgv-btn-hover-ring: rgba(10,163,163,.35); --mgv-btn-shadow: 0 2px 8px rgba(10,163,163,.28); /* ────────────────────────────────────────────────────────── INPUTS / FORMULÁRIOS ────────────────────────────────────────────────────────── */ --mgv-input-bg: #f0faf5; --mgv-input-border: #4A8A73; --mgv-border: #2f4f3a; /* ────────────────────────────────────────────────────────── CARDS ────────────────────────────────────────────────────────── */ --mgv-card-bg: rgba(9,131,143,.12); --mgv-card-border: rgba(10,163,163,.25); /* ────────────────────────────────────────────────────────── HEADER / FOOTER ────────────────────────────────────────────────────────── */ --mgv-header-bg: var(--mgv-color-primary); --mgv-footer-bg: var(--mgv-color-primary); /* ────────────────────────────────────────────────────────── MY ACCOUNT ────────────────────────────────────────────────────────── */ --mgv-ma-card-bg: rgba(9,131,143,.10); --mgv-ma-border: rgba(10,163,163,.30); --mgv-ma-btn-bg: #0AA3A3; --mgv-ma-btn-border: #16878c; --mgv-ma-btn-alt: #19755c; --mgv-ma-radius-md: var(--mgv-radius-md); --mgv-ma-radius-lg: var(--mgv-radius-lg); --mgv-ma-shadow: var(--mgv-shadow-soft); /* ────────────────────────────────────────────────────────── THANK YOU ────────────────────────────────────────────────────────── */ --mgv-ty-card-bg: rgba(9,131,143,.10); --mgv-ty-border: rgba(10,163,163,.30); --mgv-ty-btn-bg: #0AA3A3; --mgv-ty-btn-border: #16878c; --mgv-ty-radius-md: var(--mgv-radius-md); --mgv-ty-radius-lg: var(--mgv-radius-lg); --mgv-ty-shadow: var(--mgv-shadow-soft); /* ────────────────────────────────────────────────────────── BACKGROUNDS — IMAGENS No child theme: substitua o arquivo na pasta assets/imgs/ do child theme. O caminho da variável não precisa mudar. ────────────────────────────────────────────────────────── */ --mgv-bg-home-parallax: url('../imgs/fundoParallax.jpg'); --mgv-bg-internas: url('../imgs/fundo-internas.jpg'); --mgv-bg-header-mobile: url('../imgs/header_mobile.jpg'); --mgv-bg-card-moldura: url('../imgs/fundo-box-produtos.png'); --mgv-bg-home-hero: url('../imgs/illustration-hercules-2.jpg'); --mgv-bg-home-box: url('../imgs/box-produtos-2.png'); /* ────────────────────────────────────────────────────────── BACKGROUNDS — GRADIENTES RECORRENTES Nomeados pelo contexto visual, não pela cor. ────────────────────────────────────────────────────────── */ /* Botões e CTAs principais */ --mgv-gradient-btn-primary: linear-gradient(to bottom, #0AA3A3, #0C6654); /* Botão de confirmação / finalizar compra */ --mgv-gradient-btn-confirm: linear-gradient(180deg, #23c870 0%, #0d7371 100%); /* Painel de preço nos cards */ --mgv-gradient-price-panel: linear-gradient(to bottom, #0D6473, #044752); /* Tarja amarela dos carrosséis da home */ --mgv-gradient-carousel-tag: linear-gradient(to bottom, #fff221, #ecc71d); /* Fundo dos carrosséis da home */ --mgv-gradient-carousel-bg: linear-gradient(to bottom, #87d8dc 1%, #1c5f5b); /* Seções e faixas de título */ --mgv-gradient-section-bg: linear-gradient(to bottom, rgba(9,131,143,1), rgba(9,131,143,1)); /* Overlay suave sobre backgrounds de página */ --mgv-gradient-page-overlay: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.5)); /* Cards da loja e categorias */ --mgv-gradient-card-hover: linear-gradient(to bottom, rgba(16,196,163,.14), rgba(8,130,109,.10)); /* Fundo das seções de my account / thank you */ --mgv-gradient-commerce-surface: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 100%); /* Parallax — overlay de cor */ --mgv-gradient-parallax-overlay: linear-gradient(to bottom, rgb(10,139,194) 10%, rgb(6,120,109) 50%); /* Ícones de categoria (home-icons-reveal) */ --mgv-gradient-cat-icons: linear-gradient(to bottom, rgba(22,199,158,.8), rgba(7,133,129,.9)); }