. Sem isso, em algumas páginas o body crescia além do viewport (race do Tailwind CDN injetando preflight depois do site.css, whitespace de @section, etc.) — sintoma visível: faixa cinza vazia depois do conteúdo. */ body.app-shell { height: 100vh; height: 100dvh; overflow: hidden; } /* Garante que o main scrollável NÃO crie scroll horizontal acidental (alguns componentes do Tailwind, como flex sem wrap em mobile, geram overflow-x e a página inteira saca scroll lateral indesejado). */ body.app-shell main.da-scroll-area { overflow-x: hidden; } html.dark body { background: var(--color-bg) !important; color: var(--color-text); } html.dark .bg-white { background: var(--color-surface) !important; } html.dark .bg-gray-50 { background: var(--color-bg) !important; } html.dark .bg-gray-100 { background: var(--color-surface-2) !important; } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--color-border) !important; } html.dark .text-gray-900 { color: var(--color-text) !important; } html.dark .text-gray-800 { color: var(--color-text-soft) !important; } html.dark .text-gray-700 { color: var(--color-text-soft) !important; } html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--color-muted) !important; } html.dark .hover\:bg-gray-50:hover { background: var(--color-surface-2) !important; } html.dark .hover\:bg-gray-100:hover { background: #1f1f33 !important; } html.dark input, html.dark textarea, html.dark select { background: var(--color-surface-2) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--color-muted) !important; } /* ────────────────────────────────────────────────────────────────────────── ANIMAÇÕES ────────────────────────────────────────────────────────────────────────── */ @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes mesh-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(2%, -2%) scale(1.05); } 66% { transform: translate(-2%, 2%) scale(0.95); } } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes scan-line { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes slide-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Classes utilitárias de animação */ .da-mesh-bg { background: var(--gradient-mesh); background-size: 200% 200%; animation: mesh-drift 18s ease-in-out infinite; filter: blur(60px); opacity: 0.6; } html.dark .da-mesh-bg { background: var(--gradient-mesh-dark); background-size: 200% 200%; opacity: 0.5; } .da-float { animation: float-y 6s ease-in-out infinite; } .da-float-slow { animation: float-y 9s ease-in-out infinite; } .da-pulse-ring { animation: pulse-ring 2.4s ease-out infinite; } .da-shimmer { background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); background-size: 200% 100%; animation: shimmer 2s linear infinite; } html.dark .da-shimmer { background: linear-gradient( 90deg, transparent, rgba(124, 58, 237, 0.2), transparent ); background-size: 200% 100%; animation: shimmer 2s linear infinite; } .da-gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .da-blink-cursor::after { content: '▍'; color: var(--color-primary); animation: blink 1s step-end infinite; margin-left: 2px; } .da-rise { animation: slide-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .da-rise-1 { animation-delay: 0.05s; } .da-rise-2 { animation-delay: 0.15s; } .da-rise-3 { animation-delay: 0.25s; } .da-rise-4 { animation-delay: 0.35s; } /* Botão "primary tech" — gradiente com glow no hover */ .da-btn-primary { background: var(--gradient-brand); color: white; font-weight: 600; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .da-btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); opacity: 0; transition: opacity 0.3s; } .da-btn-primary > * { position: relative; z-index: 1; } .da-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-primary); } .da-btn-primary:hover::before { opacity: 1; } .da-btn-primary:active { transform: translateY(0); } /* Botão "ghost tech" — border-only com hover sutil */ .da-btn-ghost { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); font-weight: 500; transition: all 0.2s; } .da-btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); } /* Card "tech" — borda sutil, hover com glow primary */ .da-card-tech { background: var(--color-surface); border: 1px solid var(--color-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .da-card-tech::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gradient-brand); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .da-card-tech:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .da-card-tech:hover::before { opacity: 1; } /* Input "tech" — border sutil, ring no foco. Double-class (.da-input.da-input) pra vencer o preflight do Tailwind CDN que injeta