/* ========================================================= 1. DEFINIÇÃO DE TEMAS (CORES DINÂMICAS) ========================================================= */ /* TEMA PADRÃO: CUIDAR MAIS (Novo) */ :root { /* Cores extraídas da logo CuidarMais (#1B213F e #32A392) */ --primary-color: #1B213F; /* Azul Escuro Profundo */ --secondary-color: #32A392; /* Verde Teal / Água */ --accent-color: #E0F7F4; /* Fundo Claro */ --dark-text: #0a0a0a; /* Gradiente do Hero Section */ --hero-gradient: linear-gradient(135deg, #1B213F 0%, #266b61 100%); } /* TEMA LEGADO: CUIDAR CLIN (Antigo) */ /* Esta classe será injetada no quando o cliente for Clin */ body.theme-cuidarclin { --primary-color: #1d6958; /* Verde Escuro Original */ --secondary-color: #58a594; /* Verde Claro Original */ --accent-color: #bbcfca; /* Cinza/Verde Pálido */ /* Gradiente do Hero Section */ --hero-gradient: linear-gradient(135deg, #1d6958 0%, #58a594 100%); } /* ========================================================= 2. ESTILOS GLOBAIS ========================================================= */ body { font-family: 'Montserrat', sans-serif; color: var(--dark-text); /* Suaviza a troca de temas se acontecer dinamicamente */ transition: background-color 0.3s ease, color 0.3s ease; } /* Navbar Links */ .nav-link { color: var(--primary-color) !important; font-size: 0.95rem; font-weight: 600; transition: color 0.3s ease; } .nav-link:hover { color: var(--secondary-color) !important; } /* ========================================================= 3. BOTÕES PERSONALIZADOS ========================================================= */ /* Botão Sólido (Usado para CTA principal) */ .btn-custom { background-color: var(--secondary-color); border-color: var(--secondary-color); color: white; transition: all 0.3s; } .btn-custom:hover { background-color: var(--primary-color); border-color: var(--primary-color); transform: translateY(-2px); color: white; } /* Botão Outline (Borda colorida, fundo transparente) */ .btn-outline-custom { color: var(--primary-color); border-color: var(--primary-color); background-color: transparent; transition: all 0.3s; } .btn-outline-custom:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } /* ========================================================= 4. EFEITOS VISUAIS E UTILITÁRIOS ========================================================= */ .hover-up { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-up:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; } .hover-card { transition: transform 0.3s ease; } .hover-card:hover { transform: translateY(-5px); } .transform-scale { transform: scale(1.05); z-index: 10; } /* Classe utilitária para usar o gradiente correto no fundo */ .bg-hero-gradient { background: var(--hero-gradient) !important; } /* Classes utilitárias de texto para usar cores do tema */ .text-primary-custom { color: var(--primary-color) !important; } .text-secondary-custom { color: var(--secondary-color) !important; } .bg-primary-custom { background-color: var(--primary-color) !important; } .bg-secondary-custom { background-color: var(--secondary-color) !important; } /* ========================================================= 5. SHAPE DIVIDERS (Ondas no rodapé ou seções) ========================================================= */ .custom-shape-divider-bottom { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-bottom svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; }