/* Base responsiva / mobile + PWA — funilvivo (VIVO design system) */ :root { --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); } /* ===================== funilvivo tokens — DARK (Midnight Neon, sóbrio) ===================== */ :root, [data-theme="dark"] { --bg: #050507; --surface: #0C0C10; --elevated: #101014; --overlay: #16161C; --accent: #C6F24E; --accent-ink: #0A1705; --accent-hover: #D6FF6B; --accent-press: #A6E22E; --accent-glow: rgba(198,242,78,0.20); --accent-soft: rgba(198,242,78,0.12); --accent-2: #FF3D9A; --accent-2-soft: rgba(255,61,154,0.14); --grad: linear-gradient(135deg, #C6F24E 0%, #A6E22E 100%); --grad-soft: linear-gradient(135deg, rgba(198,242,78,0.14), rgba(198,242,78,0.05)); --grad-ink: #0A1705; --revenue: #C6F24E; --revenue-soft: rgba(198,242,78,0.12); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --text: #F2F2F4; --text-muted: #8A8A92; --text-faint: #5E5E68; --warn: #F5B53D; --error: #FF5C7A; --info: #C6F24E; --glass-fill: rgba(12,12,16,0.62); color-scheme: dark; } /* ===================== funilvivo tokens — LIGHT (Vibrant Pop, padrão) ===================== */ [data-theme="light"] { --bg: #F4F1FB; --surface: #FFFFFF; --elevated: #FFFFFF; --overlay: #FFFFFF; --accent: #7C3AED; --accent-ink: #FFFFFF; --accent-hover: #6D28D9; --accent-press: #5B21B6; --accent-glow: rgba(124,58,237,0.18); --accent-soft: rgba(124,58,237,0.10); --accent-2: #EC4899; --accent-2-soft: rgba(236,72,153,0.12); --grad: linear-gradient(135deg, #7C3AED 0%, #EC4899 55%, #F97316 100%); --grad-soft: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.10), rgba(249,115,22,0.10)); --grad-ink: #FFFFFF; --revenue: #16A34A; --revenue-soft: rgba(22,163,74,0.10); --border: rgba(20,12,38,0.10); --border-strong: rgba(20,12,38,0.16); --text: #1A1426; --text-muted: #6B6480; --text-faint: #9A93AE; --warn: #B45309; --error: #DC2626; --info: #7C3AED; --glass-fill: rgba(255,255,255,0.72); color-scheme: light; } /* ===================== Tema por segmento (data-niche) ===================== */ /* O NicheProvider escreve data-niche="" no conforme companies.settings.business.niche. Estes blocos sobrepõem o accent/gradiente do VIVO; 'generic' (sem bloco) mantém o padrão. Especificidade: html[data-niche="x"] (0,1,1) vence :root/[data-theme] (0,1,0) — a cor do nicho vale nos DOIS temas (tons profundos, legíveis com texto branco em dark e light). */ html[data-niche]:not([data-niche="generic"]) { --accent-ink: #FFFFFF; --grad-ink: #FFFFFF; --accent-hover: color-mix(in srgb, var(--accent) 85%, #FFFFFF); --accent-press: color-mix(in srgb, var(--accent) 80%, #000000); --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-2-soft: color-mix(in srgb, var(--accent-2) 14%, transparent); --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent)); --info: var(--accent); } html[data-niche="aesthetics"] { --accent: #E8467C; --accent-2: #F472B6; } /* rosa */ html[data-niche="beauty_salon"] { --accent: #A855F7; --accent-2: #D946EF; } /* roxo */ html[data-niche="dental"] { --accent: #0EA5E9; --accent-2: #38BDF8; } /* azul-céu */ html[data-niche="barbershop"] { --accent: #D97706; --accent-2: #F59E0B; } /* âmbar */ html[data-niche="medical"] { --accent: #059669; --accent-2: #10B981; } /* esmeralda */ html[data-niche="petshop"] { --accent: #EA580C; --accent-2: #FB923C; } /* laranja */ html[data-niche="fitness"] { --accent: #4D7C0F; --accent-2: #65A30D; } /* lima escuro */ html[data-niche="real_estate"] { --accent: #1E40AF; --accent-2: #3B82F6; } /* azul-marinho */ html[data-niche="infoproducer"] { --accent: #6D28D9; --accent-2: #8B5CF6; } /* violeta */ html[data-niche="law"] { --accent: #9F1239; --accent-2: #E11D48; } /* bordô */ html[data-niche="restaurant"] { --accent: #B91C1C; --accent-2: #EF4444; } /* vermelho */ html[data-niche="ecommerce"] { --accent: #0891B2; --accent-2: #06B6D4; } /* ciano */ html[data-niche="education"] { --accent: #4338CA; --accent-2: #6366F1; } /* índigo */ html[data-niche="automotive"] { --accent: #374151; --accent-2: #6B7280; } /* chumbo */ html, body, #root { height: 100%; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); overscroll-behavior-y: none; /* evita "pull to refresh" preso */ -webkit-tap-highlight-color: transparent; } /* rolagem suave em listas no iOS */ * { -webkit-overflow-scrolling: touch; } /* respeita áreas seguras (notch / barra inferior) quando instalado como app */ @supports (padding: env(safe-area-inset-bottom)) { .safe-bottom { padding-bottom: var(--safe-bottom); } .safe-top { padding-top: var(--safe-top); } } /* evita zoom automático no iOS em inputs (fonte < 16px) */ @media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } } /* esconde scrollbars horizontais da navegação mobile mantendo o scroll */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* ============ Polimento visual moderno (VIVO) ============ */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* número-herói / métricas em mono tabular (engenharia séria) */ .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; } /* Transições suaves em elementos interativos */ button, a, input, select, textarea, [role="button"] { transition: background-color .16s cubic-bezier(.16,1,.3,1), border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .16s ease; } button:active, [role="button"]:active { transform: translateY(1px); } /* Anel de foco acessível (ciano) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* Scrollbar discreta — profundidade por luminância */ * { scrollbar-width: thin; scrollbar-color: var(--overlay) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--overlay); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* Skeleton de carregamento */ .skeleton { position: relative; overflow: hidden; background: var(--elevated); border-radius: 10px; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: sk 1.4s infinite; } @keyframes sk { 100% { transform: translateX(100%); } } /* Toasts */ #toast-host { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 420px); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--overlay); color: var(--text); border: 1px solid var(--border); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5); font-size: 14px; } .toast--success { border-left: 4px solid var(--revenue); } .toast--error { border-left: 4px solid var(--error); } .toast--info { border-left: 4px solid var(--accent); } /* Cartões com leve elevação ao passar o mouse (opt-in via .card-hover) */ .card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card-hover:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5); } /* Aura da IA — campo de energia ciano que acende onde a IA age */ .ai-aura { position: relative; } .ai-aura::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; background: radial-gradient(circle, var(--accent-glow), transparent 70%); animation: aura 2.2s ease-in-out infinite; } @keyframes aura { 0%,100% { opacity: .4; } 50% { opacity: .85; } } /* Botão primário reutilizável (ação = gradiente da marca) */ .btn-primary { background: var(--grad); color: var(--grad-ink); font-weight: 600; border-radius: 12px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px -12px var(--accent-glow); border: 0; } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:active { filter: brightness(0.98); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: none; } /* Utilitário: texto/fundo no gradiente da marca */ .bg-grad { background: var(--grad); } .text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Respeita quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }