/** * AI Coach Pro — Ponte de identidade * =================================== * Leva o material do app-shell (luz, sombra em camadas, borda gradiente, * acento por domínio) para as telas que ainda usam o sistema antigo. * * POR QUE UMA PONTE E NÃO REESCRITA: * As telas antigas somam ~45 mil linhas e consomem os tokens do theme.css * cerca de 1.900 vezes (--primary 378x, --secondary 325x, --text-muted 307x). * Redefinindo os tokens e restilizando os primitivos compartilhados, a * identidade nova chega em ~30 páginas sem editar nenhuma delas — e sem o * risco de quebrar formulário de checkout ou funil de conversão no processo. * * Este arquivo é carregado DEPOIS do theme.css, então vence por ordem. * Reverter é apagar uma linha do theme.css. * * O que ele NÃO faz: mudar layout. Estrutura de página continua a mesma. */ /* ════════════════════════════════════════════ 1. TOKENS — a identidade nova nos nomes antigos ════════════════════════════════════════════ */ /* :root:root — especificidade maior que o :root do theme.css, que vem depois do @import. Sem isso os tokens antigos venceriam por ordem. */ :root:root { /* Superfícies: o fundo ficou mais profundo e menos arroxeado */ --bg-dark: #070c18; --bg-dark-2: #0b1220; --bg-dark-3: #090f1c; --bg-card: rgba(255, 255, 255, 0.038); /* Marca — mantida; era o que já identificava o produto */ --primary: #4fd1c5; --primary-dark: #45c4b4; --primary-light: #7ee8dc; --primary-bg: rgba(79, 209, 197, 0.12); --secondary: #68d391; --secondary-dark: #48bb78; --secondary-light: #9ae6b4; --secondary-bg: rgba(104, 211, 145, 0.12); /* Texto: o --text-muted antigo (#94a3b8) já passava na WCAG AA (7,62:1 sobre o fundo novo). Foi clareado para 8,51:1 sobre card e 9,48:1 sobre o fundo por leitura em tela de celular na academia, não por acessibilidade — o cinza-azulado antigo sumia sob luz forte. */ --text-light: #f7fafc; --text-muted: #a8b6c8; --text-primary: #f7fafc; --text-bright: #ffffff; --text-dim: #a8b6c8; --white: #f7fafc; --gray: #a8b6c8; /* Linhas quase invisíveis: a borda de 1px sólida em volta de tudo era o que mais denunciava "template" nas telas antigas */ --border-light: rgba(255, 255, 255, 0.075); --border-medium: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.075); /* Sombras em camadas (contato + ambiente) no lugar de blur único */ --shadow-sm: 0 1px 2px rgba(2, 8, 18, .30), 0 2px 8px -4px rgba(2, 8, 18, .40); --shadow-md: 0 1px 2px rgba(2, 8, 18, .32), 0 8px 28px -12px rgba(2, 8, 18, .60); --shadow-lg: 0 2px 4px rgba(2, 8, 18, .35), 0 18px 48px -18px rgba(2, 8, 18, .72); --shadow-focus: 0 0 0 3px rgba(79, 209, 197, .28); --gradient-primary: linear-gradient(135deg, #4fd1c5, #68d391); --gradient-body: none; --success: #68d391; --warning: #f6ad55; --danger: #ff6b6b; --info: #63b3ed; /* Painel do profissional (cyber-theme) alinhado ao mesmo material */ --neon-purple: #4fd1c5; --neon-cyan: #63b3ed; --neon-green: #68d391; --neon-orange: #f6ad55; --dark-surface: rgba(255, 255, 255, 0.038); --dark-nebula: rgba(255, 255, 255, 0.030); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; /* ── Landing (landing-v2.css / copa-theme.css) ── Ela já usava a mesma marca teal ("synced with theme.css"), então herdar o material é coerente. Só os nomes de token mudam. */ --bg-body: #070c18; --bg-surface: #0b1220; --bg-card-solid: #0e1524; --bg-elevated: rgba(255, 255, 255, 0.055); --bg-input: rgba(0, 0, 0, 0.22); --accent: #4fd1c5; --accent-dark: #45c4b4; --accent-light: rgba(79, 209, 197, 0.12); --border: rgba(255, 255, 255, 0.075); --gradient-btn: linear-gradient(180deg, #7ee8dc 0%, #4fd1c5 42%, #45c4b4 100%); } /* Fundo: dois focos deslocados + grão, igual às telas novas */ body.sh, body { background: #070c18 !important; color: var(--text-light); } body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 520px; background: radial-gradient(80% 60% at 8% -6%, rgba(79, 209, 197, .18), transparent 62%), radial-gradient(70% 55% at 92% 2%, rgba(104, 211, 145, .08), transparent 64%); pointer-events: none; z-index: 0; } /* Grão quebra o banding do gradiente em tela escura */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* Conteúdo acima das camadas decorativas */ body > *:not(script):not(style) { position: relative; z-index: 1; } /* ════════════════════════════════════════════ 2. BOTÕES — o mesmo modelo de luz das telas novas ════════════════════════════════════════════ */ .btn, .btn-primary, .btn-neon, .btn-download, .btn-gradient, .btn-glossary, .btn-primary-custom, .btn-secondary-custom, .btn-primario, .btn-option, .btn-cta, .btn-big, .btn-glass, .btn-outline-modern, .btn-neon-outline { border-radius: 14px !important; font-weight: 700; letter-spacing: -0.005em; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), filter .18s ease; } .btn:active, .btn-primary:active, .btn-neon:active, .btn-download:active, .btn-gradient:active { transform: translateY(1px) scale(.995); } /* Primário: gradiente com o claro no topo, aro especular e três sombras — contato, ambiente e o glow da própria cor. A lista inclui as variantes que cada tela criou por conta própria (btn-primary-custom, btn-cta, btn-big…): sem elas, a página fica com card novo e botão velho, que é pior que não ter mexido. */ .btn-primary, .btn-neon, .btn-gradient, .btn-success, .btn-primary-custom, .btn-primario, .btn-cta, .btn-big, .btn-scan, .btn-glass, .btn-option.selected, .btn-submit, button[type="submit"]:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-link):not(.btn-icone):not(.btn-icon) { background: linear-gradient(180deg, #7ee8dc 0%, #4fd1c5 42%, #45c4b4 100%) !important; border: none !important; color: #032b28 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .55), inset 0 -1px 0 0 rgba(0, 40, 38, .22), 0 1px 2px rgba(2, 10, 20, .40), 0 6px 16px -4px rgba(2, 10, 20, .55), 0 10px 32px -8px rgba(79, 209, 197, .55) !important; } .btn-primary:hover, .btn-neon:hover, .btn-gradient:hover, .btn-success:hover, .btn-primary-custom:hover, .btn-primario:hover, .btn-cta:hover, .btn-big:hover { filter: brightness(1.04); color: #032b28 !important; } /* Secundários: um fio do acento na base tira o ar de "desabilitado" que o cinza puro sobre fundo escuro sempre transmite */ .btn-ghost, .btn-secondary, .btn-secondary-custom, .btn-outline-light, .btn-outline, .btn-outline-modern, .btn-neon-outline, .btn-download, .btn-glossary, .btn-voltar, .btn-option:not(.selected) { background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)), linear-gradient(180deg, transparent 55%, rgba(79,209,197,.10)) !important; border: none !important; color: var(--text-light) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.20), inset 0 -2px 0 -1px rgba(79,209,197,.35), 0 1px 2px rgba(2,10,20,.30), 0 6px 18px -8px rgba(2,10,20,.55) !important; } .btn-ghost .material-symbols-outlined, .btn-download .material-symbols-outlined, .btn-glossary .material-symbols-outlined { color: var(--primary); } .btn-danger { background: linear-gradient(180deg, #ff8a8a 0%, #ff6b6b 45%, #e94f4f 100%) !important; border: none !important; color: #2b0606 !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.45), 0 1px 2px rgba(2,10,20,.40), 0 10px 30px -8px rgba(255,107,107,.50) !important; } /* ════════════════════════════════════════════ 3. SUPERFÍCIES ════════════════════════════════════════════ */ .card, .glass-card, .micro-card, .form-card, .card-panel, .stat-card { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important; border: none !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.045), 0 1px 2px rgba(2,8,18,.30), 0 8px 28px -12px rgba(2,8,18,.60) !important; backdrop-filter: none; } .card-header { background: transparent !important; border-bottom-color: rgba(255,255,255,.06) !important; } .card-footer { background: transparent !important; border-top-color: rgba(255,255,255,.06) !important; } .glass-tip, .alert, .alert-info, .alert-info-custom { border-radius: 14px !important; border: none !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05) !important; } .alert-success { background: rgba(104,211,145,.10) !important; box-shadow: inset 0 0 0 1px rgba(104,211,145,.26) !important; } .alert-danger { background: rgba(255,107,107,.10) !important; box-shadow: inset 0 0 0 1px rgba(255,107,107,.26) !important; } .alert-warning { background: rgba(246,173,85,.10) !important; box-shadow: inset 0 0 0 1px rgba(246,173,85,.26) !important; } /* ════════════════════════════════════════════ 4. FORMULÁRIOS — 288 rótulos e 174 campos no app ════════════════════════════════════════════ */ .form-control, .form-select, .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select { background: rgba(0, 0, 0, .22) !important; border: none !important; border-radius: 14px !important; color: var(--text-light) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08) !important; transition: box-shadow .2s ease, background .2s ease; } .form-control:focus, .form-select:focus, .form-input:focus, input:focus, textarea:focus, select:focus { background: rgba(0, 0, 0, .30) !important; outline: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(79,209,197,.55), 0 0 0 3px rgba(79,209,197,.16) !important; } .form-control::placeholder, textarea::placeholder { color: rgba(247,250,252,.32) !important; } .form-label, .form-label-sm { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } /* Campo numérico não deve mostrar as setinhas: em telas de treino e dieta o usuário digita, e a seta rouba área de toque */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ════════════════════════════════════════════ 5. ETIQUETAS E NAVEGAÇÃO ════════════════════════════════════════════ */ .badge, .chip-info, .badge-exercise-detail { border-radius: 999px !important; border: none !important; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.06) !important; font-weight: 600; } .nav-tabs, .treino-tabs { border-bottom: none !important; gap: 8px; } .nav-tabs .nav-link, .treino-tabs .nav-link { border: none !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important; color: var(--text-muted) !important; font-weight: 600; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05) !important; } .nav-tabs .nav-link.active, .treino-tabs .nav-link.active { background: linear-gradient(180deg, rgba(79,209,197,.26), rgba(79,209,197,.10)) !important; color: #7ee8dc !important; box-shadow: inset 0 1px 0 0 rgba(79,209,197,.40), inset 0 0 0 1px rgba(79,209,197,.30), 0 4px 16px -6px rgba(79,209,197,.55) !important; } /* Barras de progresso viram sulco com material dentro */ .progress { background: rgba(0,0,0,.30) !important; border-radius: 999px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.045); } .progress-bar { background: linear-gradient(90deg, #4fd1c5, #68d391) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.45), 0 0 12px rgba(79,209,197,.55); } /* ════════════════════════════════════════════ 6. TIPOGRAFIA ════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; } .text-white-50 { color: var(--text-muted) !important; } /* Números com largura fixa não fazem o layout dançar quando mudam */ .stat-value, .metrica-val, .kcal-num, [class*="valor"], [class*="numero"] { font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════ 7. SEÇÕES DE PÁGINA (minha_conta, progresso antigo, planos…) ════════════════════════════════════════════ Estas telas declaram o próprio CSS em bloco