/* ========================================================================== Custom CSS — Sistema Virtual Landing Page Estilos complementares ao Tailwind CSS CDN. Mantém-se mínimo: Tailwind cuida da maioria dos estilos. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Base — scroll-behavior e seleção de texto -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } ::selection { background-color: #2E5090; color: #fff; } /* -------------------------------------------------------------------------- 2. Foco visível — acessibilidade (WCAG 2.1 AA) Complementa o fallback inline do com estilos mais específicos. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid #2E5090; outline-offset: 2px; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #2E5090; outline-offset: 2px; border-radius: 2px; } /* Remove outline padrão do navegador para cliques de mouse */ :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 3. Micro-interações — transições para cards e botões -------------------------------------------------------------------------- */ /* Card hover: elevação sutil + leve deslocamento para cima */ .card-hover { transition: box-shadow 0.3s ease, transform 0.3s ease; } .card-hover:hover { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06); transform: translateY(-4px); } /* Botões — transição suave de cor e sombra */ a[class*="bg-cta"], button[class*="bg-cta"], .btn-transition { transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } a[class*="bg-cta"]:hover, button[class*="bg-cta"]:hover, .btn-transition:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } a[class*="bg-cta"]:active, button[class*="bg-cta"]:active, .btn-transition:active { transform: scale(0.97); } /* Links de navegação — underline animado */ .nav-link { position: relative; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: #2E5090; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* -------------------------------------------------------------------------- 4. Scroll-snap — carrossel mobile para prova social -------------------------------------------------------------------------- */ .scroll-snap-x { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .scroll-snap-x::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .scroll-snap-center { scroll-snap-align: center; } .scroll-snap-start { scroll-snap-align: start; } /* -------------------------------------------------------------------------- 5. Utilitários extras -------------------------------------------------------------------------- */ /* Logos de parceiros — escala de cinza com opacidade reduzida */ .logo-grayscale { filter: grayscale(100%); opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease; } .logo-grayscale:hover { filter: grayscale(0%); opacity: 1; } /* Menu hambúrguer — transição de abertura/fechamento */ .menu-transition { transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .menu-transition[aria-hidden="true"] { max-height: 0; opacity: 0; } .menu-transition[aria-hidden="false"] { max-height: 500px; opacity: 1; } /* Linha de progresso para os passos de cadastro */ .step-connector { position: relative; } .step-connector::after { content: ''; position: absolute; background-color: #2E5090; } /* Desktop: linha horizontal entre passos */ @media (min-width: 768px) { .step-connector::after { top: 50%; left: 100%; width: 100%; height: 2px; transform: translateY(-50%); } } /* Indicador circular dos passos */ .step-circle { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #2E5090; background-color: #fff; color: #2E5090; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease; } /* Redução de animações para usuários que preferem menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 7. Signup Form — Plan selector, toast, success screen -------------------------------------------------------------------------- */ /* Plan selector cards */ .plan-card .plan-card-inner { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .plan-radio:checked + .plan-card-inner { border-color: #C4531A; box-shadow: 0 0 0 2px #C4531A; } /* Toast notifications */ .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-radius: 0.75rem; color: #fff; font-size: 0.875rem; font-weight: 500; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); animation: toast-slide-in 0.3s ease; max-width: 380px; } .toast-success { background-color: #10B981; } .toast-error { background-color: #EF4444; } .toast-fade-out { animation: toast-fade-out 0.3s ease forwards; } @keyframes toast-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-fade-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* Success screen */ .signup-success-icon { width: 4rem; height: 4rem; border-radius: 50%; background-color: #10B981; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; animation: success-pop 0.4s ease; } @keyframes success-pop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Loading spinner for submit button */ .btn-loading { position: relative; pointer-events: none; opacity: 0.7; } .btn-loading::after { content: ''; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .toast, .toast-fade-out, .signup-success-icon, .btn-loading::after { animation: none !important; } .toast { opacity: 1; transform: none; } }