/* ============================================================ EVEREST — CAMADA DE ELEVACAO (piloto na HOME) Inspirada nos sites Figueiredo Neto e Minart Moveis: 1) Reveal on scroll 2) Cabecalho de secao (eyebrow numerado) 3) Ritmo de fundo 4) Tipografia fluida + microinteracoes Tudo escopado em .home-elevate / .js-reveal — facil de reverter. ============================================================ */ /* ---------- 1. REVEAL ON SCROLL ---------- Estado oculto SO existe quando o reveal.js marca . Se o JS falhar, nada fica escondido (fallback seguro). */ .js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 2. CABECALHO DE SECAO (eyebrow numerado) ---------- */ .home-elevate .section-badge { display: inline-flex !important; align-items: center; gap: 0.55rem; background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px; color: var(--brand-primary, #FF6600) !important; font-family: 'Plus Jakarta', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; } /* esconde o icone antigo do badge para um visual de "eyebrow" */ .home-elevate .section-badge svg { display: none !important; } /* numero da secao (antes do label) + risquinho — via CSS, sem mexer no HTML. .section-badge e inline-flex; usamos order para por numero e linha antes do texto */ .home-elevate .section-badge::before { order: -2; color: var(--text-tertiary, #757b7b); font-variant-numeric: tabular-nums; font-weight: 700; } .home-elevate .section-badge::after { order: -1; content: ""; width: 26px; height: 1px; margin: 0 0.55rem 0 0.4rem; background: var(--text-tertiary, #757b7b); opacity: 0.55; } .home-elevate .one-step-away-section .section-badge::before { content: "01"; } .home-elevate .cursos-alta-section .section-badge::before { content: "02"; } .home-elevate .sobre-everest-section .section-badge::before { content: "03"; } .home-elevate .categorias-section .section-badge::before { content: "04"; } .home-elevate .noticias-section .section-badge::before { content: "05"; } .home-elevate .historias-section .section-badge::before { content: "06"; } /* ---------- 4a. TIPOGRAFIA FLUIDA (titulos de secao) ---------- */ .home-elevate .section h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.1; } .home-elevate .section h3 { letter-spacing: -0.01em; } /* ---------- 3. RITMO DE FUNDO ENTRE SECOES ---------- alterna primary / secondary para criar respiro visual */ .home-elevate .cursos-alta-section, .home-elevate .categorias-section, .home-elevate .historias-section { background: var(--bg-secondary, #f8f9fa) !important; } .home-elevate .one-step-away-section, .home-elevate .sobre-everest-section, .home-elevate .noticias-section { background: var(--bg-primary, #ffffff) !important; } /* ---------- 4b. MICROINTERACOES ---------- */ /* link/botao "Ver todos ..." ganha seta que desliza no hover */ .home-elevate .cta.secondary.w-button::after { content: "\2192"; /* → */ display: inline-block; margin-left: 0.5rem; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .home-elevate .cta.secondary.w-button:hover::after { transform: translateX(5px); } /* cards de curso/categoria: leve realce de borda no hover (alem do lift global) */ .home-elevate .curso-card-v2:hover, .home-elevate .categoria-card:hover, .home-elevate .historia-card:hover { border-color: var(--brand-primary, #FF6600) !important; } /* ---------- 5. BOTOES (refinados, estilo pill) ---------- */ .home-elevate .cta { position: relative; height: auto !important; min-height: 52px; padding: 15px 30px !important; border-radius: 100px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: 0.01em; overflow: hidden; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } .home-elevate .cta:active { transform: translateY(0) !important; } /* Primario (laranja) — brilho que varre no hover + elevacao */ .home-elevate .cta:not(.secondary):not(.secondary-outline):not(.white-button) { background: var(--brand-primary, #FF6600) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(255, 102, 0, 0.55); } .home-elevate .cta:not(.secondary):not(.secondary-outline):not(.white-button)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%); transform: translateX(-120%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .home-elevate .cta:not(.secondary):not(.secondary-outline):not(.white-button):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(255, 102, 0, 0.6); } .home-elevate .cta:not(.secondary):not(.secondary-outline):not(.white-button):hover::before { transform: translateX(120%); } /* Secundario (em fundo claro) — contorno que preenche no hover */ .home-elevate .cta.secondary { background: transparent !important; color: var(--text-primary) !important; border: 1.5px solid var(--border-color-dark, #d1d5db) !important; } .home-elevate .cta.secondary:hover { background: var(--brand-primary, #FF6600) !important; border-color: var(--brand-primary, #FF6600) !important; color: #fff !important; transform: translateY(-2px); } /* Botoes dos cards — alinhar ao novo formato pill */ .home-elevate .btn-vermais-card { border-radius: 100px !important; } .home-elevate .btn-whatsapp-card { border-radius: 50% !important; } /* Link de modalidade — sublinhado que cresce no hover */ .home-elevate .cta-link.modalidade-link { position: relative; display: inline-block; padding-bottom: 2px; transition: color 0.25s ease; } .home-elevate .cta-link.modalidade-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: currentColor; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .home-elevate .cta-link.modalidade-link:hover::after { width: 100%; } /* ---------- 6. CARD "CURSOS EM ALTA" (mais limpo e elegante) ---------- */ /* Superficie: plana, borda sutil, sombra suave (sem gradiente/brilho neon) */ .home-elevate .curso-card-v2 { background: #151517 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5); } .home-elevate .curso-card-v2::before { display: none !important; } /* remove barra superior */ .home-elevate .curso-card-v2:hover { transform: translateY(-6px); border-color: rgba(255, 102, 0, 0.35) !important; box-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.65) !important; } .home-elevate .curso-card-v2-image { height: 184px; } /* Status: pílula de vidro escuro + bolinha colorida (sem gradiente/glow) */ .home-elevate .curso-badge-v2 { top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; background: rgba(10, 10, 10, 0.55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50px; color: #fff !important; font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; box-shadow: none !important; } .home-elevate .curso-badge-v2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary, #FF6600); flex-shrink: 0; } .home-elevate .curso-badge-v2.edital::before { background: #ff8a3d; } .home-elevate .curso-badge-v2.novo::before { background: #3ddc84; } .home-elevate .curso-badge-v2.emalta::before { background: #54a9ff; } /* Modalidade: mesma linguagem de vidro, agora no topo direito (corners equilibrados) */ .home-elevate .curso-modalidade-tag { top: 14px; right: 14px; bottom: auto; padding: 5px 12px; background: rgba(10, 10, 10, 0.55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50px; color: #fff !important; font-size: 10.5px; letter-spacing: 0.6px; } /* Corpo e titulo */ .home-elevate .curso-card-v2-body { padding: 22px; } .home-elevate .curso-card-v2-title { font-size: 19px; margin-bottom: 14px; } /* Meta mais leve */ .home-elevate .curso-card-v2-meta { gap: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .home-elevate .curso-card-v2-meta .meta-item { font-size: 12.5px; } .home-elevate .curso-card-v2-meta .meta-item svg { width: 15px; height: 15px; } /* Preco: sem a "caixa" laranja — limpo, alinhado a esquerda, em branco */ .home-elevate .curso-card-v2-price { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 18px; text-align: left !important; } .home-elevate .curso-card-v2-price .price-label { font-size: 10.5px; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.45); margin-bottom: 2px; } .home-elevate .curso-card-v2-price .price-value { justify-content: flex-start; align-items: baseline; gap: 3px; margin-bottom: 2px; } .home-elevate .curso-card-v2-price .price-currency, .home-elevate .curso-card-v2-price .price-cents { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin-top: 0; } .home-elevate .curso-card-v2-price .price-amount { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; } .home-elevate .curso-card-v2-price .price-installment { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); } /* ---------- 7. CARDS "CATEGORIAS" (mais limpo e elegante) ---------- */ .home-elevate .categoria-card { padding: 26px 24px !important; border-radius: 18px !important; box-shadow: var(--shadow-sm); } /* remove a barra lateral que cresce (ruido) */ .home-elevate .categoria-card::before { display: none !important; } .home-elevate .categoria-card:hover { transform: translateY(-6px); border-color: rgba(255, 102, 0, 0.35) !important; box-shadow: var(--shadow-lg) !important; } /* Icone: caixa mais enxuta; hover ganha leve realce (mantem o preenchimento laranja) */ .home-elevate .categoria-icon { width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px; } .home-elevate .categoria-card:hover .categoria-icon { transform: translateY(-2px) scale(1.04); } /* Texto: hierarquia mais limpa */ .home-elevate .categoria-info { margin-bottom: 18px; } .home-elevate .categoria-nome { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; } .home-elevate .categoria-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-tertiary, #757b7b); } /* bolinha discreta antes da contagem */ .home-elevate .categoria-count::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-primary, #FF6600); opacity: 0.7; } .home-elevate .categoria-link { font-size: 13.5px; }