/** * VIME SSO — botao "Entrar com VIME" pra wp-login.php * Hospedado em dash.agenciavime.com/vime-sso.css * Atualizar aqui propaga em todos sites managed sem novo deploy do plugin. * * Versao: 2.0.0 — botao "Entrar com [V]" que expande pra "Entrar com [VIME]" no hover */ #vime-sso-container { display: block !important; width: 100% !important; margin-top: 56px !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; clear: both !important; box-sizing: border-box !important; } /* Divider "─── ou ───" */ #vime-sso-divider { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin: 0 0 24px 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } #vime-sso-divider .vime-sso-line { flex: 1 1 auto !important; display: block !important; height: 1px !important; min-height: 1px !important; background: rgba(255, 255, 255, 0.15) !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } #vime-sso-divider .vime-sso-or { flex: 0 0 auto !important; display: inline-block !important; color: rgba(255, 255, 255, 0.4) !important; font-size: 10px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; text-shadow: none !important; } /* Botao — estado normal (ghost, apagado) — match shape do Acessar */ #vime-sso-btn { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 48px !important; padding: 14px 16px !important; margin: 0 !important; background: transparent !important; background-size: 200% 100% !important; background-position: 0% 50% !important; color: rgba(255, 255, 255, 0.55) !important; font-weight: 500 !important; font-size: 15px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; line-height: 1 !important; box-sizing: border-box !important; text-shadow: none !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, border-color 0.35s ease, filter 0.2s ease !important; will-change: transform, box-shadow, background !important; outline: none !important; } /* Shine sweep */ #vime-sso-btn::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important; transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 1 !important; } /* Glow no active */ #vime-sso-btn::after { content: "" !important; position: absolute !important; inset: -2px !important; border-radius: 12px !important; background: radial-gradient(circle at center, rgba(195, 248, 95, 0.4) 0%, transparent 70%) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease !important; z-index: -1 !important; } #vime-sso-btn > * { position: relative !important; z-index: 2 !important; } /* Texto "Entrar com" */ #vime-sso-btn .vime-sso-text { display: inline-block !important; line-height: 1 !important; transition: color 0.25s ease !important; } /* Container do logo — clip + transicao de largura */ #vime-sso-btn .vime-sso-logo { display: inline-flex !important; align-items: center !important; overflow: hidden !important; height: 16px !important; width: 17px !important; transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1) !important; flex-shrink: 0 !important; } #vime-sso-btn .vime-sso-logo svg { height: 16px !important; width: auto !important; display: block !important; color: currentColor !important; flex-shrink: 0 !important; } /* HOVER: ghost vira colorido cheio + lift + V expande pra VIME completo */ #vime-sso-btn:hover { transform: translateY(-2px) scale(1.015) !important; background: linear-gradient(135deg, #5C13E6 0%, #7A2FF0 50%, #5C13E6 100%) !important; background-size: 200% 100% !important; background-position: 100% 50% !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 28px -4px rgba(92, 19, 230, 0.6), 0 4px 10px -2px rgba(92, 19, 230, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; filter: brightness(1.05) !important; text-decoration: none !important; } #vime-sso-btn:hover::before { left: 140% !important; } #vime-sso-btn:hover .vime-sso-logo { width: 61px !important; /* mostra VIME completo (height 16 * 381/100 ≈ 61) */ } /* ACTIVE: press + glow */ #vime-sso-btn:active { transform: translateY(0) scale(0.96) !important; background: linear-gradient(135deg, #4A0FC4 0%, #5C13E6 100%) !important; box-shadow: 0 2px 8px 0 rgba(92, 19, 230, 0.4), inset 0 3px 8px 0 rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(195, 248, 95, 0.15) !important; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, background 0.15s ease !important; filter: brightness(0.95) !important; } #vime-sso-btn:active::after { opacity: 1 !important; animation: vime-sso-ripple 0.5s ease-out !important; } /* FOCUS-VISIBLE: anel duplo */ #vime-sso-btn:focus-visible { border-color: rgba(195, 248, 95, 0.6) !important; box-shadow: 0 0 0 3px rgba(195, 248, 95, 0.35), 0 0 0 6px rgba(92, 19, 230, 0.25) !important; } @keyframes vime-sso-ripple { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #vime-sso-btn, #vime-sso-btn::before, #vime-sso-btn::after, #vime-sso-btn .vime-sso-logo { transition: none !important; animation: none !important; } #vime-sso-btn:hover, #vime-sso-btn:active { transform: none !important; } }