/* ========================================================================== LISBOA CAR - DESIGN SYSTEM & VARIABLES (VERSION 2.4 - FONTE ÚNICA) >> Este arquivo é a ÚNICA fonte de verdade dos design tokens do tema. Enfileirado como 'lisboa-car-variables' no functions.php, ANTES de style.css e main.css. Nenhum outro arquivo deve redeclarar :root. v2.4: - Movido para assets/css/variables.css como fonte única (antes os tokens viviam duplicados no style.css da raiz). v2.3: - Adicionados os "trigêmeos" RGB das cores usadas em rgba() (--cor-primaria-rgb / --cor-whatsapp-rgb / --cor-preta-rgb), para que sombras e transparências usem UMA fonte de verdade. - Adicionado --cor-fundo-claro (#F5F5F5) usado como fundo de . - Sombras reescritas para consumir os trigêmeos RGB (valor idêntico). v2.2: - Adicionado --borda-radius (alias padrão) — usado por .toyota-dicas-card. >> Após publicar: LiteSpeed → Purge All. ========================================================================== */ :root { /* -------------------------------------------------------------------------- CORES (PALETA INSTITUCIONAL COMPLETA) -------------------------------------------------------------------------- */ --cor-primaria: #EC631D; --cor-destaque: #FF7A3D; --cor-whatsapp: #25D366; /* Escala de Cinza / Neutros */ --cor-preta: #000000; --cor-fundo: #1A1A1A; --cor-fundo-claro: #F5F5F5; /* fundo claro (ex.: cabeçalho de tabela) */ --cor-branca: #FFFFFF; --cor-grafite: #1A1A1A; /* Alias semântico de --cor-fundo (mesmo hex, intencional) */ --cor-grafite-medio: #2A2A2A; --cor-grafite-claro: #3A3A3A; --cor-cinza-escuro: #4A4A4A; --cor-cinza-medio: #6A6A6A; --cor-cinza-medio-claro: #B0B0B0; --cor-cinza-claro: #E0E0E0; --cor-cinza-muito-claro: #F0F0F0; /* cinza bem claro p/ bordas (era usado sem definição em 3 páginas) */ --cor-urgencia: #FF3B30; /* alertas/urgência (vinha só do :root do crítico) */ --cor-badge-online: #4CAF50; /* badge "Online agora" */ /* Trigêmeos RGB (para uso dentro de rgba() com variável) -- NÃO REMOVER. Mantenha SEMPRE em sincronia com os hexadecimais acima. */ --cor-primaria-rgb: 236, 99, 29; /* = #EC631D */ --cor-whatsapp-rgb: 37, 211, 102; /* = #25D366 */ --cor-preta-rgb: 0, 0, 0; /* = #000000 */ /* Opacidade */ --opacidade-10: 0.1; --opacidade-25: 0.25; --opacidade-50: 0.5; --opacidade-75: 0.75; --opacidade-90: 0.9; /* Gradientes */ --gradiente-laranja: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-destaque) 100%); --gradiente-cinza: linear-gradient(135deg, var(--cor-cinza-claro) 0%, var(--cor-cinza-medio-claro) 100%); --gradiente-escuro: linear-gradient(135deg, var(--cor-grafite) 0%, var(--cor-grafite-medio) 100%); /* -------------------------------------------------------------------------- TIPOGRAFIA -------------------------------------------------------------------------- */ --fonte-titulos: 'Montserrat', sans-serif; --fonte-textos: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; /* Tamanhos — ESCALA FLUIDA (clamp: mín celular → máx desktop). Fonte única p/ header e páginas. */ --h1-size: clamp(28px, 4vw, 46px); /* hero: mobile 28 → desktop 46 (V2) */ --h2-size: clamp(22px, 3.2vw, 38px); /* título de seção: mobile 22 → desktop 38 (V2) */ --h3-size: clamp(19px, 2.6vw, 27px); /* subtítulos: mobile 19 → desktop 27 */ --h4-size: clamp(18px, 2vw, 21px); --p-size: clamp(16px, 1.1vw, 18px); /* Tamanhos Mobile */ --h1-size-mobile: 32px; --h2-size-mobile: 28px; --h3-size-mobile: 24px; --h4-size-mobile: 20px; --p-size-mobile: 16px; /* Interface / Navegação (texto de UI menor que o corpo — menu, links de topo) */ --font-size-nav: 14px; /* itens do menu, submenu */ --font-size-caption: 12px; /* legendas, micro-rótulos */ /* Camada CAIXA/CARD (títulos e textos DENTRO de cards/boxes/grades — menores) */ --font-size-card-title: clamp(15px, 1.4vw, 18px); /* título dentro de card/box (reduzido) */ --font-size-body-sm: clamp(15px, 1vw, 16px); /* texto dentro de card/box */ /* Entrelinha (line-height) */ --leading-titulo: 1.2; /* títulos justos */ --leading-texto: 1.6; /* corpo — WCAG pede >= 1.5 */ /* Ritmo de texto (espaços entre título/texto/parágrafos) */ --espaco-titulo-texto: clamp(12px, 1.5vw, 20px); /* título -> texto abaixo */ --espaco-paragrafo: clamp(12px, 1.2vw, 16px); /* entre parágrafos */ /* Linha decorativa (barra laranja sob H1/H2) — padronizada */ --linha-deco-largura: 80px; /* H1 */ --linha-deco-largura-h2: 60px; /* H2 */ --linha-deco-altura: 4px; --linha-deco-cor: linear-gradient(90deg, var(--cor-primaria) 0%, transparent 100%); --linha-deco-radius: 2px; /* BOTÕES — padrão único (2 variantes: primário laranja / whatsapp verde, ambos texto preto) */ --botao-padding: 14px 28px; /* garante altura ~48px (alvo de toque WCAG 2.5.5) */ --botao-fonte: var(--fonte-titulos); /* Montserrat */ --botao-peso: 700; --botao-tamanho: var(--p-size); /* fluido 16→18 */ --botao-radius: var(--borda-radius-lg); /* 12px */ --botao-altura-min: 48px; --botao-foco: 3px; /* espessura do contorno de foco (teclado) */ /* -------------------------------------------------------------------------- ESPAÇAMENTO & MARGENS -------------------------------------------------------------------------- */ /* Sistema de Grid */ --espacamento-3xs: 4px; --espacamento-2xs: 8px; --espacamento-xs: 12px; --espacamento-sm: 16px; --espacamento-md: 24px; --espacamento-lg: 32px; --espacamento-xl: 48px; --espacamento-xxl: 64px; --espacamento-xxxl: 80px; /* Margens de Seção — FLUIDAS (padrão internacional: gutter enxuto + max-width centraliza no monitor grande) */ --margem-secao-topo: clamp(40px, 5vw, 64px); --margem-secao-base: clamp(40px, 5vw, 64px); --margem-secao-lateral: 160px; /* margem lateral do V2 (o layout que a dona aprovou). Reduzida em telas menores nos @media do fim do arquivo. */ /* Legado (compat) — a clamp acima já cobre o celular; mantidos p/ referências antigas */ --margem-secao-topo-mobile: 40px; --margem-secao-base-mobile: 40px; --margem-secao-lateral-mobile: 16px; /* MARGENS ESPECÍFICAS PARA SEÇÃO HERO */ --hero-margem-topo: 40px; --hero-margem-base: 40px; --hero-margem-topo-mobile: 25px; --hero-margem-base-mobile: 25px; /* ESPAÇAMENTOS INTERNOS */ --espacamento-paragrafo: 16px; /* Espaço entre parágrafos */ --espacamento-paragrafo-mobile: 12px; --espacamento-titulo-subtitulo: 20px; /* Espaço entre título e subtítulo */ --espacamento-titulo-subtitulo-mobile: 15px; --espacamento-stats-top: 30px; /* Espaço antes das stats */ --espacamento-stats-top-mobile: 20px; --espacamento-stats-bottom: 20px; /* Espaço depois das stats */ --espacamento-stats-bottom-mobile: 15px; /* -------------------------------------------------------------------------- LAYOUT & BREAKPOINTS -------------------------------------------------------------------------- */ --breakpoint-tablet: 992px; --breakpoint-mobile: 768px; --breakpoint-small-mobile: 480px; --breakpoint-tiny-mobile: 360px; --largura-maxima-container: 1920px; --largura-maxima-conteudo: 1400px; /* largura do conteúdo do V2 (aprovado). O .lc-container soma a margem lateral a isto. */ --largura-maxima-texto: 800px; --altura-header: 80px; --altura-header-mobile: 60px; --altura-botao: 52px; --altura-botao-mobile: 48px; /* -------------------------------------------------------------------------- EFEITOS VISUAIS -------------------------------------------------------------------------- */ /* Sombras (usam os trigêmeos RGB — resultado visual idêntico ao anterior) */ --sombra-suave: 0 4px 12px rgba(var(--cor-primaria-rgb), 0.1); --sombra-media: 0 8px 24px rgba(var(--cor-primaria-rgb), 0.15); --sombra-forte: 0 12px 32px rgba(var(--cor-preta-rgb), 0.3); --sombra-whatsapp: 0 4px 12px rgba(var(--cor-whatsapp-rgb), 0.3); --sombra-online: 0 2px 8px rgba(76, 175, 80, 0.4); /* Transições */ --transicao: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transicao-rapida: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; --transicao-lenta: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Bordas */ --borda-radius: 8px; /* ALIAS PADRÃO (= --borda-radius-md). Usado por .toyota-dicas-card. NÃO REMOVER. */ --borda-radius-sm: 4px; --borda-radius-md: 8px; --borda-radius-lg: 12px; --borda-radius-xl: 16px; --borda-radius-pill: 50px; --borda-radius-circular: 50%; /* -------------------------------------------------------------------------- Z-INDEX LAYERS -------------------------------------------------------------------------- */ --z-index-background: -1; --z-index-base: 1; --z-index-content: 10; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-overlay: 300; --z-index-modal: 400; --z-index-popover: 500; --z-index-tooltip: 600; --z-index-toast: 700; } /* Override de espaçamento no celular pequeno (movido do CSS crítico do header). Redefinir custom properties DENTRO de @media é válido (o inválido é usar var() na CONDIÇÃO do @media). */ /* Margem lateral responsiva: 160px no desktop largo → reduz gradualmente. */ @media (max-width: 1280px) { :root { --margem-secao-lateral: 80px; } } @media (max-width: 992px) { :root { --margem-secao-lateral: 48px; } } @media (max-width: 768px) { :root { --margem-secao-lateral: 24px; } } @media (max-width: 480px) { :root { --margem-secao-lateral: 16px; --espacamento-lg: 24px; --espacamento-xl: 32px; } }