/* ============================================================================ ATIVE-VARIABLES.CSS ============================================================================ Variaveis CSS centralizadas para o site Ative Fisioterapia. IMPORTANTE: Este arquivo DEVE ser carregado PRIMEIRO, antes de todos os outros arquivos CSS do Ative (exceto creative.css do Bootstrap). ORDEM DE CARREGAMENTO: 1. creative.css (Bootstrap) 2. ative-variables.css - ESTE ARQUIVO 3. Todos os demais ative-*.css VERSAO: 2.1 DATA: Janeiro 2026 ============================================================================ */ :root { /* ======================================================================== CORES PRINCIPAIS ======================================================================== */ /* Marrom - Cor primaria da marca */ --marrom-escuro: #211d1a; --marrom-medio: #523b2a; --marrom-claro: #87644a; --marrom-hover: #6d5142; /* Bege - Tons neutros quentes */ --bege: #9f8c7a; --bege-claro: #b6a495; --bege-navbar: #f0eae0; /* Verde - Cor de acao (CTAs, sucesso) */ --verde: #0f3d2e; /* CTA principal (premium) */ --verde-escuro: #0c3326; /* hover/active do CTA */ /* ======================================================================== ACENTOS PREMIUM ======================================================================== */ /* Dourado - Destaque premium */ /* --dourado: #b8a57d; --dourado-hover: #c4b38a; --dourado-texto: #967a4a; */ --dourado: #c9a961; --dourado-hover: #d4b574; --dourado-texto: #a78849; /* versão mais escura para texto */ /* Cobre - Gradientes e acentos */ --cobre: #b87333; /* Neutros */ --branco-puro: #ffffff; --off-white: #faf8f5; --cinza-claro: #f7f7f7; --cinza-texto: #5a5a5a; /* Cinza para textos secundarios/muted */ /* ======================================================================== TOKENS SEMÂNTICOS (SUPERFÍCIES / TEXTO / BORDAS) ======================================================================== */ /* Superfícies (fundos) */ --bg-1: var(--off-white); /* fundo principal quente */ --bg-2: #f3eee6; /* alternância de seção (leve, quente) */ --surface-1: var(--branco-puro); /* cards */ --surface-2: #fbf7f1; /* cards “quentes” opcionais */ /* Bordas */ --border-1: rgba(33, 29, 26, 0.07); /* borda discreta */ --border-2: rgba(33, 29, 26, 0.12); /* borda mais presente (hover/realce) */ /* Texto */ --text-1: var(--marrom-escuro); /* título/texto principal */ --text-2: var(--marrom-medio); /* texto secundário */ --text-muted: var(--cinza-texto); /* texto auxiliar */ /* ======================================================================== RGB TOKENS (para rgba consistentes) ======================================================================== */ --marrom-escuro-rgb: 33, 29, 26; --dourado-rgb: 201, 169, 97; --verde-rgb: 15, 61, 46; /* WhatsApp (somente como canal/ícone, NÃO como CTA dominante) */ --whatsapp: #25d366; --whatsapp-escuro: #128c7e; /* ======================================================================== SOMBRAS ======================================================================== */ /* Sombras sutis e profissionais */ --sombra-leve: 0 1px 3px rgba(var(--marrom-escuro-rgb), 0.03), 0 4px 12px rgba(var(--marrom-escuro-rgb), 0.05); --sombra-media: 0 2px 8px rgba(var(--marrom-escuro-rgb), 0.04), 0 8px 24px rgba(var(--marrom-escuro-rgb), 0.08); --sombra-forte: 0 8px 24px rgba(var(--marrom-escuro-rgb), 0.1), 0 16px 48px rgba(var(--marrom-escuro-rgb), 0.15); --sombra-dourada: 0 4px 12px rgba(var(--dourado-rgb), 0.12), 0 8px 24px rgba(var(--dourado-rgb), 0.08); /* ======================================================================== SOMBRAS PREMIUM (em camadas — mais sofisticadas) ======================================================================== */ --shadow-layered-sm: 0 1px 2px rgba(var(--marrom-escuro-rgb), 0.03), 0 2px 4px rgba(var(--marrom-escuro-rgb), 0.03), 0 4px 8px rgba(var(--marrom-escuro-rgb), 0.04); --shadow-layered-md: 0 2px 4px rgba(var(--marrom-escuro-rgb), 0.02), 0 4px 8px rgba(var(--marrom-escuro-rgb), 0.03), 0 8px 16px rgba(var(--marrom-escuro-rgb), 0.04), 0 12px 24px rgba(var(--marrom-escuro-rgb), 0.03); /* Inner highlight para ícones/badges */ --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* ======================================================================== TOKENS PARA IDIOMA (verde - usado em equipe) ======================================================================== */ --verde-lang: #28a745; --verde-lang-escuro: #1e7e34; --verde-lang-rgb: 40, 167, 69; /* ======================================================================== TRANSICOES ======================================================================== */ /* Animacoes suaves e profissionais */ --transicao-rapida: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transicao-media: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transicao-suave: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* ======================================================================== BORDER RADIUS ======================================================================== */ /* Arredondamentos padronizados */ --borda-radius-sm: 8px; /* Pequeno - inputs, badges */ --borda-radius-md: 12px; /* Medio - cards pequenos */ --borda-radius-lg: 18px; /* Grande - cards principais */ --borda-radius-xl: 24px; /* Extra grande - containers */ --borda-radius-pill: 50px; /* Pilula - botoes arredondados */ /* ======================================================================== DIMENSOES ======================================================================== */ /* Altura do navbar */ --nav-h: 80px; /* ======================================================================== ARTIGOS — CONTROLE EDITORIAL (layout em telas grandes) ======================================================================== */ --article-content-max: 72ch; /* reduz linha longa em desktop */ --article-hero-max-w: 1120px; /* limita largura do hero em desktop */ /* ======================================================================== ALIASES SEMÂNTICOS (para padronizar uso no components.css e demais) ======================================================================== */ /* CTA */ --cta-primary: var(--verde); --cta-primary-hover: var(--verde-escuro); --on-cta-primary: var(--branco-puro); --cta-secondary: var(--dourado); --cta-secondary-hover: var(--dourado-hover); --on-cta-secondary: var(--branco-puro); /* Texto / bordas (nomes curtos usados em components) */ --text-primary: var(--text-1); --text-secondary: var(--text-2); --border: var(--border-1); --border-strong: var(--border-2); /* Radius (nomes curtos) */ --radius-sm: var(--borda-radius-sm); --radius-md: var(--borda-radius-md); --radius-lg: var(--borda-radius-lg); --radius-xl: var(--borda-radius-xl); --radius-pill: var(--borda-radius-pill); /* Shadows (nomes curtos) */ --shadow-soft: var(--sombra-leve); --shadow-cta: var(--sombra-leve); --shadow-cta-hover: var(--sombra-media); /* Focus ring (padrão único) */ --focus-ring: 0 0 0 0.22rem rgba(var(--verde-rgb), 0.22); /* ========================= SISTEMA GLOBAL DE SEÇÕES ========================= */ /* Superfícies (alternância) */ /* Espaçamentos verticais padrão das seções */ --section-py: 6.5rem; --section-py-sm: 4.5rem; /* Cabeçalho de seção (título + subtítulo + divider) */ --section-header-gap: 1.25rem; /* Divider global */ --divider-width: 4rem; --divider-height: 3px; /* Fundos de SEÇÃO (alternância) — NÃO confundir com surface de cards */ --section-bg-1: var(--bg-1); --section-bg-2: var(--bg-2); /* Tintas sutis (opcionais) — usando RGB existentes */ --section-bg-1-tint: rgba(var(--dourado-rgb), 0.035); --section-bg-2-tint: rgba(var(--dourado-rgb), 0.055); /* Divider global */ --divider-color: var(--dourado); /* HERO (espresso) */ --hero-bg: var(--marrom-escuro); --on-hero: var(--off-white); --on-hero-muted: rgba(255, 255, 255, 0.82); --hero-divider: rgba(var(--dourado-rgb), 0.55); --hero-border: rgba(255, 255, 255, 0.14); /* ========================= FONTES ========================= */ --fonte-ui: 'Inter', sans-serif; --fonte-display: 'Playfair Display', serif; } /* ======================================================================== FIM DAS VARIAVEIS ======================================================================== */ /* Fallback fonts */ body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }