/* ============================================================================ * POLISH.CSS · Camada de refinamento visual aplicada sobre as sources Throne. * ---------------------------------------------------------------------------- * Adiciona micro-interacoes, animacoes de entrada e estados refinados sem * alterar nenhum HTML existente. Tudo via selectores nao-invasivos (pseudo * states, attribute selectors, classes ja existentes). * * Carregar como ultimo CSS do pra ter prioridade sobre os outros. * ============================================================================ */ /* ============================================================ * SISTEMA DE ANIMACOES BASE * ============================================================ */ @keyframes appPolishFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes appPolishSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes appPolishSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes appPolishScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes appPolishShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes appPolishPulseSoft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* Respeita motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ * TRANSICOES GLOBAIS · cobrem 95% dos botoes/links/inputs sem * precisar editar HTML * ============================================================ */ a, button, [role="button"], input, select, textarea, .btn, .button, .card, [class*="btn-"] { transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease; } /* Smooth scroll universal */ html { scroll-behavior: smooth; } /* Render mais nitido em telas hi-DPI */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================ * BOTOES · hover lift + active press * ============================================================ */ button:not(:disabled):not([disabled]), .btn:not(:disabled):not([disabled]), input[type="submit"]:not(:disabled), input[type="button"]:not(:disabled), a.btn, a[role="button"] { cursor: pointer; } button:not(:disabled):not(.no-polish):hover, .btn:not(:disabled):not(.no-polish):hover, input[type="submit"]:not(:disabled):hover, input[type="button"]:not(:disabled):hover, a.btn:hover, a[role="button"]:hover { transform: translateY(-1px); filter: brightness(1.04) saturate(1.05); } button:not(:disabled):active, .btn:not(:disabled):active, input[type="submit"]:not(:disabled):active, input[type="button"]:not(:disabled):active, a.btn:active { transform: translateY(0); filter: brightness(0.96); } /* ============================================================ * INPUTS / SELECTS · focus ring + hover suave * ============================================================ */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { -webkit-appearance: none; -moz-appearance: none; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover:not(:disabled):not(:read-only), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: rgba(59, 130, 246, 0.6); } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--app-focus, #1351B4); box-shadow: 0 0 0 4px var(--app-focus-ring, rgba(19, 81, 180, 0.18)); } /* Garante que placeholders fiquem visiveis mas suaves */ ::placeholder { color: #94a3b8; opacity: 1; } /* ============================================================ * CHECKBOXES / RADIOS · estilo limpo, escala suave no foco * ============================================================ */ input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover { transform: scale(1.08); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid rgba(19, 81, 180, 0.4); outline-offset: 2px; border-radius: 3px; } /* ============================================================ * LINKS · underline elegante on hover * ============================================================ */ a:not(.btn):not([class*="button"]):not([class*="btn-"]):not(.no-polish):hover { opacity: 0.85; } /* ============================================================ * CARDS / CONTAINERS · subtle lift no hover * ============================================================ */ .card:not(.no-polish):hover, .benefit-card:not(.no-polish):hover, .testimonial-card:not(.no-polish):hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.08); } /* ============================================================ * ANIMACOES DE ENTRADA · aplicadas em containers principais * ============================================================ */ /* Apenas fade-in suave nos containers MAIORES. Slide pode quebrar layout * em pages com sticky/absolute positioning · mantemos minimalista. */ main, [role="main"], .confirmacao-box, .formulario-container, .card.shadow-sm { animation: appPolishFadeIn 320ms ease-out both; } /* Header com fade leve (sem slide pra nao quebrar sticky) */ header, .header, .vivo-header, .header-govbr { animation: appPolishFadeIn 280ms ease-out both; } /* ============================================================ * FOOTERS · garante que ícones de redes sociais fiquem em LINHA * (corrige bug observado na Recupera onde ficavam empilhados) * ============================================================ */ .portal-redes, .portal-redes-list, .redes-sociais .portal-redes, .footer .redes-sociais ul, ul.portal-redes { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; align-items: center; } .portal-redes li, .portal-redes-item, .portalredes-item { list-style: none; margin: 0; padding: 0; display: inline-flex; } /* Icones individuais de rede social · sao circulos sobre fundo escuro */ .portal-redes a, .portalredes-item a, .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; transition: transform 220ms ease, background-color 220ms ease; } .portal-redes a:hover, .portalredes-item a:hover, .social-link:hover { transform: translateY(-2px) scale(1.08); background: rgba(255, 255, 255, 0.18); opacity: 1 !important; } /* ============================================================ * STATE CLASSES · UTILITARIOS pra Recupera (gov.br) * ============================================================ */ .urgent-badge { animation: appPolishPulseSoft 1.4s ease-in-out infinite; } .btn-pagar-pix { /* ja tem estilo proprio · so adicionando reforco no shimmer */ will-change: transform, box-shadow; } /* ============================================================ * BOTOES TIM (Bootstrap) · refinamento extra * ============================================================ */ .btn-primary, .vivo-btn, .btn[style*="background-color: #002198"], button[style*="background-color: #002198"], a[style*="background-color: #002198"] { box-shadow: 0 6px 16px -6px rgba(0, 33, 152, 0.45); } .btn-primary:hover, .vivo-btn:hover, .btn[style*="background-color: #002198"]:hover, button[style*="background-color: #002198"]:hover, a[style*="background-color: #002198"]:hover { box-shadow: 0 10px 24px -8px rgba(0, 33, 152, 0.55), 0 4px 10px -4px rgba(0, 33, 152, 0.4); } /* ============================================================ * BOTOES OAB (#058fd0 ciano) · refinamento extra * ============================================================ */ [style*="background-color: #058fd0"], [style*="background: #058fd0"], .btn-confirmar, .btn-continuar, .btn-prosseguir, .btn-prossegir, .btn-pix { box-shadow: 0 6px 16px -6px rgba(5, 143, 208, 0.45); } [style*="background-color: #058fd0"]:hover, .btn-confirmar:hover, .btn-continuar:hover, .btn-prosseguir:hover { box-shadow: 0 10px 24px -8px rgba(5, 143, 208, 0.55); } .btn-pix { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms ease, background 250ms ease; } .btn-pix:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px -10px rgba(40, 167, 69, 0.6), 0 6px 14px -4px rgba(40, 167, 69, 0.45) !important; filter: brightness(1.04); } /* ============================================================ * INPUTS COM FORMATO DE GOV.BR (Recupera) · focus refinado * ============================================================ */ .bg-gray-50 input, .rounded-md input, input.form-control { transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } input.form-control:focus { border-color: #1351B4; box-shadow: 0 0 0 4px rgba(19, 81, 180, 0.16); background: #fff; } /* Bootstrap form-select (TIM/OAB) · focus suave */ .form-select:focus, .form-control:focus { border-color: #002198; box-shadow: 0 0 0 4px rgba(0, 33, 152, 0.16); } /* ============================================================ * ALERTAS / BADGES · entrada suave + hover sutil * ============================================================ */ .alert, .badge, .urgent-badge, [class*="alert-"] { animation: appPolishScaleIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* ============================================================ * COUNTDOWN · efeito glow no numero ativo * ============================================================ */ .countdown-number, .countdown-display, .timer-display, #countdown-timer { text-shadow: 0 0 14px currentColor; letter-spacing: 0.02em; } /* ============================================================ * SCROLLBAR refinada (webkit/blink) * ============================================================ */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 3px solid #f1f5f9; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ============================================================ * IMAGENS · drag desabilitado + load suave * ============================================================ */ img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } img[loading="lazy"], img:not([src]) { opacity: 0; } img[loading="lazy"][src], img[src] { animation: appPolishFadeIn 320ms ease-out both; } /* ============================================================ * CORRECOES PONTUAIS de alinhamento * ============================================================ */ /* Recupera · floating-badge nao deve sobrepor conteudo importante */ .floating-badge { z-index: 90 !important; } /* TIM · breadcrumbs com padding consistente */ .container.py-1 > div > span[style*="font-size: 11px"] { letter-spacing: 0.04em; font-weight: 500; } /* OAB · etapa-titulo / titulos centralizados com mais respiracao */ .etapa-titulo, .confirmacao-box h1, .confirmacao-box h2 { margin-bottom: 14px; letter-spacing: -0.01em; } /* OAB · input CPF maior em desktop pra ficar premium */ @media (min-width: 768px) { .confirmacao-box input[type="text"], .confirmacao-box input[type="tel"] { font-size: 1.05rem; padding-top: 14px; padding-bottom: 14px; } } /* ============================================================ * MOBILE-FIRST refinements * ============================================================ */ @media (max-width: 768px) { /* Botoes ficam full-width e mais altos no mobile (touch target 44px+) */ button:not(.no-polish):not(.pix-copy-btn):not(.pix-modal__close), .btn:not(.no-polish):not(.pix-copy-btn) { min-height: 44px; } /* Inputs no mobile ficam maiores (evita zoom no iOS quando font < 16px) */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: max(16px, 1rem); } /* Footer no mobile · grids viram coluna */ footer .row, footer .col-md-3, footer .col-md-4 { text-align: center; } /* Cards no mobile · menos padding lateral */ .card-body { padding: 16px 14px !important; } /* Diminuir gap excessivo entre seções no mobile */ main, [role="main"] { padding-bottom: 24px; } } /* ============================================================ * Garantir que o LOGO TIM/Bootstrap nao quebre no mobile * ============================================================ */ @media (max-width: 480px) { .Claro-logo, .vivo-logo { height: 34px !important; } .vivo-header .container .row .col-6:first-child { padding-right: 0; } } /* ============================================================ * Selecao de texto · cor on-brand * ============================================================ */ ::selection { background: rgba(19, 81, 180, 0.22); color: inherit; } /* ============================================================ * Foco visivel (accessibility) · so quando teclado, nao mouse * ============================================================ */ :focus:not(:focus-visible) { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(19, 81, 180, 0.5); outline-offset: 2px; border-radius: 4px; } /* ============================================================ * BARRA DE PROGRESSO (Recupera/OAB) · animacao gradiente * ============================================================ */ .progress-bar, #progress-bar-1, #progress-bar-2 { background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100% ), linear-gradient(90deg, #22c55e, #16a34a); background-size: 200% 100%, 100% 100%; animation: appPolishShimmer 2.4s linear infinite; } /* ============================================================ * Loaders / spinners · efeito mais elegante * ============================================================ */ .spinner, .loading.show, .loading { will-change: transform; } /* ============================================================ * REFINAMENTO FINAL · cards/seções com sombra premium * ============================================================ */ .bg-white.border.border-gray-200.rounded-lg, .bg-gray-50.border.border-gray-200.rounded-lg, .card.shadow-sm, .confirmacao-box { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); } /* INPUTS Tailwind (Recupera) com bordas mais nitidas */ input.border-gray-300:hover:not(:disabled):not(:read-only), input.border-gray-200:hover:not(:disabled):not(:read-only), select.border-gray-300:hover:not(:disabled), select.border-gray-200:hover:not(:disabled) { border-color: #93c5fd; } input.border-gray-300:focus, input.border-gray-200:focus, select.border-gray-300:focus, select.border-gray-200:focus, textarea.border-gray-300:focus { border-color: #2563eb !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important; outline: none; } /* TIM bg-light-purple cards · bordas arredondadas */ [style*="background-color: #EFEDFE"] { border-radius: 12px !important; } /* TIM · input com fundo branco e focus azul on-brand */ .form-control:hover:not(:disabled):not(:read-only) { border-color: rgba(0, 33, 152, 0.5); } /* TIM BOTOES ESCOLARIDADE · estado interativo refinado */ .btn-check + .btn, label.btn[for*="option"] { transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .btn-check + .btn:hover, label.btn[for*="option"]:hover { transform: translateY(-1px); border-color: #002198; background: rgba(0, 33, 152, 0.04); } .btn-check:checked + .btn, label.btn.active { transform: scale(1.02); box-shadow: 0 8px 20px -6px rgba(0, 33, 152, 0.4); } /* CHECKBOX SWITCH (TIM finalizar) · estilo elegante */ .form-check-input[type="checkbox"]:checked { background-color: #002198; border-color: #002198; } .form-check-input:focus { box-shadow: 0 0 0 4px rgba(0, 33, 152, 0.2); border-color: #002198; } /* PROGRESS BAR · shimmer overlay */ .progress-bar { position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: appPolishShimmer 2s linear infinite; } /* Helper text muda cor quando input em foco */ input:focus + .text-xs.text-gray-500, input:focus ~ .text-xs.text-gray-500 { color: #2563eb; } /* Badges com leve translacao */ [class*="bg-green"][class*="rounded-full"], [class*="bg-blue"][class*="rounded-full"][class*="px-"] { transition: transform 200ms ease; } [class*="bg-green"][class*="rounded-full"]:hover, [class*="bg-blue"][class*="rounded-full"][class*="px-"]:hover { transform: translateY(-1px); } /* Imagens responsivas · só aplica max-width quando o autor não controlou * dimensões via inline style ou utility class (w-/h-/img class custom). * NUNCA toca em height — deixa o CSS local controlar. */ img:not([style*="width"]):not([style*="max-width"]):not([class*="w-"]):not([class*="profile-img"]):not([class*="logo"]) { max-width: 100%; } /* Mobile · botoes principais full-width */ @media (max-width: 640px) { .btn-pagar-pix, .btn-pix, [id*="btnPagar"], #btn-pagamento { width: 100% !important; max-width: 100% !important; } .vivo-header .container .row { padding: 12px 0 !important; } .card-body { padding: 18px 16px !important; } } /* Links gov.br com cor + underline on hover */ a.text-blue-600:hover, a.text-blue-700:hover, a.text-blue-800:hover { color: #1351B4; text-decoration: underline; text-underline-offset: 3px; } /* Botoes principais ganham glow sutil no hover */ button[type="submit"]:not(:disabled):not(.no-polish):hover, input[type="submit"]:not(:disabled):hover, a.vivo-btn:hover, button[id*="btnContinuar"]:not(:disabled):hover, .btn-primary:not(:disabled):hover, .btn-success:not(:disabled):hover { box-shadow: 0 10px 24px -10px currentColor, 0 0 0 4px rgba(255,255,255,0.08); }