/** * Access Control Styles * * Purpose: Styling for Google OAuth login overlay and user profile display * Design: Matches main application design system (style.css) */ /* User Profile Header Styles */ #user-profile-header { display: flex; align-items: center; gap: 0.5rem; } #user-profile-header .avatar-fallback { flex-shrink: 0; } #user-profile-header img { object-fit: cover; flex-shrink: 0; } /* User Profile Dropdown */ #user-profile-dropdown { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05); } #user-profile-dropdown button:hover { background-color: var(--color-neutral-50); } /* ── Gate de boot ── Enquanto a autenticação não resolve, o shell autenticado fica invisível: o usuário deslogado deve ver só a tela de login, nunca a top bar piscando antes do redirect. A classe sai do em accessControl.js quando há sessão válida; sem sessão ela permanece e o #access-control-overlay cobre. O fundo é o MESMO do overlay para a transição não piscar branco. visibility (e não display) evita reflow no momento em que o shell aparece. */ html.auth-pending { background-color: var(--color-bg); } html.auth-pending #app, html.auth-pending #view-sync-activity { visibility: hidden; } /* Login Overlay */ #access-control-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; z-index: 10000; font-family: var(--font-sans); } .access-control-container { width: 100%; max-width: 400px; padding: 1rem; } .access-control-card { background: white; border-radius: var(--radius-lg); padding: 3rem 2.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-neutral-200); text-align: center; } /* Logo styling */ .access-control-logo { width: 240px; height: auto; margin: 0 auto 1.5rem; display: block; } .access-control-card h1 { font-size: 1.875rem; font-weight: 600; color: var(--color-neutral-900); margin: 0 0 0.5rem 0; /* mesmo serif do wordmark — o login é a porta do produto */ font-family: var(--font-display); } .access-control-card p { font-size: 1rem; color: var(--color-neutral-600); margin: 0 0 2rem 0; line-height: 1.5; } /* Google Sign-In button */ .google-signin-btn { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 500; color: var(--color-neutral-800); background-color: white; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); font-family: var(--font-sans); display: flex; align-items: center; justify-content: center; gap: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .google-signin-btn:hover { background-color: var(--color-neutral-50); border-color: var(--color-neutral-400); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .google-signin-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .google-signin-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(92, 107, 74, 0.14); border-color: var(--color-primary-600); } .google-signin-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Spinner animation for loading state */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--color-neutral-300); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .access-error { color: var(--color-error); font-size: 0.875rem; margin-top: 0.75rem; min-height: 1.25rem; font-weight: 500; } .access-note { font-size: 0.875rem !important; color: var(--color-neutral-500) !important; margin-top: 1.5rem !important; margin-bottom: 0 !important; } /* Mobile responsiveness */ @media (max-width: 480px) { .access-control-container { padding: 1rem; } .access-control-card { padding: 2rem 1.5rem; } .access-control-card h1 { font-size: 1.5rem; } .access-control-logo { width: 192px; } } /* Tablet styles */ @media (min-width: 481px) and (max-width: 768px) { .access-control-container { max-width: 480px; } } /* Touch improvements for mobile */ @media (hover: none) and (pointer: coarse) { .google-signin-btn { padding: 0.875rem 1rem; font-size: 1.0625rem; } }