/* Paleta e utilitários do DS Agilidade+ (espelho dos tokens do app; página web independente, sem Tailwind). Fonte da verdade: J:\Git\meetnote\tailwind.config.js + src\renderer\src\styles.css. Tema segue o sistema (prefers-color-scheme), padrão escuro. A marca (agblue/agteal) é igual nos dois temas; as neutras (page/surface/line/texto) alternam. --c-accent é sobrescrito por app. */ :root { /* Neutras — tema escuro (padrão). */ --c-page: #1b212f; --c-surface: #1e2533; --c-surface-alt: #232c3d; --c-surface-elevated: #2a3550; --c-line: #232c3d; --c-line-card: #283242; --c-line-strong: #2d3d55; --c-cloud: #cfe0f5; --c-pearl: #eaf2fb; --c-mist: #94b8d9; --c-slate: #5c7a99; /* Marca (constante nos dois temas). */ --c-agblue: #4ba6ff; --c-agblue-dark: #2e90ff; --c-agteal: #00e1cd; --c-white: #ffffff; --c-danger: #ef4444; /* Acento do app (default = agblue) — sobrescrito por login.js via style inline na . */ --c-accent: #4ba6ff; --c-accent-dark: #2e90ff; /* Texto sobre o botão branco (Google) — escuro fixo, não é neutra de tema. */ --c-ink: #1f2430; } @media (prefers-color-scheme: light) { :root { --c-page: #eef2f8; --c-surface: #ffffff; --c-surface-alt: #f1f5fb; --c-surface-elevated: #f7f9fd; --c-line: #dbe3ee; --c-line-card: #e2e9f2; --c-line-strong: #c9d5e5; --c-cloud: #2a3344; --c-pearl: #16202e; --c-mist: #44607d; --c-slate: #6a829c; } } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--c-page); color: var(--c-pearl); font-family: 'Comfortaa', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* ─── Layout centralizado (card único) ───────────────────────────────────────────────────────── */ .login { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 24px; overflow: hidden; } .card { position: relative; width: 100%; max-width: 380px; text-align: center; animation: fade-up 0.4s ease; } /* Glow de marca sutil atrás do card (centralizado). */ .brand-glow { pointer-events: none; position: absolute; left: 50%; top: 50%; width: 34rem; height: 34rem; transform: translate(-50%, -50%); border-radius: 9999px; background: color-mix(in srgb, var(--c-accent) 8%, transparent); filter: blur(150px); } /* ─── Marca (logo + nome, centralizados) ─────────────────────────────────────────────────────── */ .mark { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; } .mark-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--c-white); background-image: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); box-shadow: 0 3px 12px 0 color-mix(in srgb, var(--c-accent) 35%, transparent); } .mark-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-pearl); line-height: 1.15; } /* ─── Título e descrição ─────────────────────────────────────────────────────────────────────── */ .title { margin: 28px 0 0; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--c-pearl); } .title .accent { color: var(--c-accent); } .desc { margin: 10px auto 0; max-width: 20rem; font-size: 14px; line-height: 1.6; color: var(--c-mist); } .buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--c-line-strong); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, background-color 0.15s ease, transform 0.1s ease; } .btn:disabled { opacity: 0.6; cursor: default; } .btn:not(:disabled):active { transform: scale(0.99); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-page), 0 0 0 4px var(--c-accent); } /* Google — botão branco com texto escuro (espelha LoginView). */ .btn-primary { color: var(--c-ink); background: var(--c-white); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25); } .btn-primary:not(:disabled):hover { filter: brightness(0.97); } /* Microsoft — superfície neutra. */ .btn-secondary { color: var(--c-pearl); background: var(--c-surface-alt); } .btn-secondary:not(:disabled):hover { background: var(--c-surface-elevated); } .status { min-height: 20px; margin-top: 16px; font-size: 12px; color: var(--c-mist); } .status.error { color: var(--c-danger); } .terms { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-slate); } .terms a { color: var(--c-accent); text-decoration: none; } .terms a:hover { text-decoration: underline; } .terms[hidden] { display: none; } /* ─── Rodapé (frase rotativa / nota) ─────────────────────────────────────────────────────────── */ .foot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; } .footer { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--c-slate); } /* Assinatura discreta "powered by Agilidade+" — foco fica no app. */ .powered { font-size: 11px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--c-slate) 75%, transparent); } .footer .footer-icon { flex: none; color: var(--c-accent); display: inline-flex; } .footer.animate { animation: fade-up 0.4s ease; } .icon { flex: none; } /* ─── Espera (três pontos) ───────────────────────────────────────────────────────────────────── */ .dots { display: inline-flex; align-items: center; gap: 4px; } .dots span { width: 6px; height: 6px; border-radius: 9999px; background: var(--c-accent); animation: pulse-dot 1.3s ease-in-out infinite; } .dots span:nth-child(2) { animation-delay: 0.2s; } .dots span:nth-child(3) { animation-delay: 0.4s; } /* ─── Animações do DS ────────────────────────────────────────────────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }