/* Theme Name: Arena Manto BR Child Theme URI: https://arenamantobr.mamboreconecta.com.br Description: Child theme para Arena Manto BR — loja de camisas esportivas Author: Mamborê Conecta Author URI: https://mamboreconecta.com.br Template: astra Version: 1.0.0 Text Domain: arena-manto-br */ /* ========================================================================== DESIGN TOKENS — Sistema de Design Arena Manto BR ========================================================================== */ :root { /* --- Cores --- */ --arena-preto: #0a0a0f; --arena-escuro: #111827; --arena-card: #1f2937; --arena-borda: #374151; --arena-cinza: #6b7280; --arena-texto-claro: #d1d5db; --arena-branco: #ffffff; --arena-branco-suave: #f9fafb; /* Paleta de Acento — identidade esportiva BR */ --arena-verde: #22c55e; --arena-verde-escuro: #16a34a; --arena-amarelo: #fbbf24; --arena-amarelo-dark: #d97706; --arena-vermelho: #ef4444; --arena-vermelho-dark: #dc2626; /* Cor principal de destaque */ --arena-acento: #22c55e; --arena-acento-hover: #16a34a; /* --- Tipografia --- */ --font-display: 'Oswald', 'Bebas Neue', sans-serif; --font-titulo: 'Montserrat', sans-serif; --font-corpo: 'Poppins', 'Montserrat', sans-serif; /* Escala tipográfica */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-hero: clamp(2.5rem, 6vw, 5rem); /* --- Espaçamentos --- */ --esp-xs: 4px; --esp-sm: 8px; --esp-md: 16px; --esp-lg: 24px; --esp-xl: 48px; --esp-2xl: 80px; --esp-3xl: 120px; /* --- Bordas --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* --- Sombras --- */ --sombra-sm: 0 2px 8px rgba(0,0,0,0.3); --sombra-md: 0 4px 20px rgba(0,0,0,0.4); --sombra-lg: 0 8px 40px rgba(0,0,0,0.5); --sombra-verde: 0 4px 20px rgba(34,197,94,0.35); --sombra-hover: 0 12px 48px rgba(0,0,0,0.6); /* --- Transições --- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* --- Layout --- */ --container-max: 1280px; --header-height: 70px; --header-mobile: 60px; } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-corpo); background-color: var(--arena-preto); color: var(--arena-branco); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition-base); } button, .button { cursor: pointer; border: none; outline: none; font-family: var(--font-corpo); } /* ========================================================================== TIPOGRAFIA GLOBAL ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-titulo); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--arena-branco); } .display-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* ========================================================================== IMPORTAÇÃO DE FONTES (Google Fonts) ========================================================================== */ /* Adicionar no via functions.php: https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap */