/** * 2026 HEQAF — shared application styles (external stylesheet for CSP-friendly pages) * Use with: or */ :root { --heqaf-bg: #f8fafc; --heqaf-text: #1e293b; --heqaf-muted: #64748b; --heqaf-border: #e5e7eb; --heqaf-primary: #1e40af; --heqaf-primary-dark: #1e3a8a; --heqaf-success: #059669; --heqaf-danger: #dc2626; --heqaf-warning: #f59e0b; --heqaf-radius: 8px; --heqaf-radius-lg: 15px; --heqaf-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* ------------------------------------------------------------------------- */ /* Login */ /* ------------------------------------------------------------------------- */ body.login-page { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; } body.login-page *, body.login-page *::before, body.login-page *::after { box-sizing: border-box; } .login-page .login-container { background: #fff; border-radius: 20px; padding: 3rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 100%; max-width: 500px; } .login-page .login-header { text-align: center; margin-bottom: 2rem; } .login-page .login-header h1 { color: var(--heqaf-primary-dark); font-size: 2rem; margin-bottom: 0.5rem; } .login-page .login-header p { color: var(--heqaf-muted); } .login-page .alert { padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; } .login-page .alert-error { background: #fee2e2; color: var(--heqaf-danger); border-left: 4px solid var(--heqaf-danger); } .login-page .alert-success { background: #d1fae5; color: var(--heqaf-success); border-left: 4px solid var(--heqaf-success); } .login-page .form-group { margin-bottom: 1.75rem; } .login-page label { display: block; margin-bottom: 0.75rem; color: #374151; font-weight: 600; font-size: 1rem; } .login-page input[type="email"], .login-page input[type="text"], .login-page input[type="password"] { width: 100%; padding: 1rem 1.25rem; border: 2px solid var(--heqaf-border); border-radius: 10px; font-size: 1.1rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .login-page input[type="email"]:focus, .login-page input[type="text"]:focus, .login-page input[type="password"]:focus { outline: none; border-color: var(--heqaf-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1); } .login-page .btn { width: 100%; padding: 1rem; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); color: #fff; } .login-page .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4); } .login-page .form-footer { text-align: center; margin-top: 1.5rem; } .login-page .form-footer a { color: var(--heqaf-primary); text-decoration: none; font-weight: 500; } .login-page .form-footer a:hover { text-decoration: underline; } .login-page .back-home { text-align: center; margin-top: 1rem; } .login-page .back-home a { color: #fff; text-decoration: none; } .login-page .login-info-banner { background: #dbeafe; border-left: 4px solid #3b82f6; padding: 1rem; border-radius: var(--heqaf-radius); margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--heqaf-primary); } /* ------------------------------------------------------------------------- */ /* App shell (chair / reviewer / author internal pages using this sheet) */ /* ------------------------------------------------------------------------- */ body.app-shell { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--heqaf-bg); padding: 2rem; color: var(--heqaf-text); box-sizing: border-box; } body.app-shell *, body.app-shell *::before, body.app-shell *::after { box-sizing: border-box; } .app-shell .container { max-width: 800px; margin: 0 auto; background: #fff; padding: 2rem; border-radius: var(--heqaf-radius-lg); box-shadow: var(--heqaf-shadow); } .app-shell .container.container--lg { max-width: 900px; } .app-shell h1 { margin-top: 0; } .app-shell .btn { padding: 0.75rem 1.5rem; color: #fff; text-decoration: none; border-radius: var(--heqaf-radius); border: none; cursor: pointer; font-weight: 600; display: inline-block; margin-right: 0.5rem; font-family: inherit; font-size: 1rem; line-height: 1.25; background: var(--heqaf-success); } .app-shell .btn:disabled, .app-shell .btn[disabled] { opacity: 0.55; cursor: not-allowed; } .app-shell .btn-success { background: var(--heqaf-success); } .app-shell .btn-danger { background: var(--heqaf-danger); } .app-shell .btn-secondary { background: #64748b; } .app-shell .btn-warning { background: var(--heqaf-warning); color: #fff; } .app-shell .alert { padding: 1rem; border-radius: var(--heqaf-radius); margin-bottom: 1rem; } .app-shell .alert-error { background: #fee2e2; color: var(--heqaf-danger); } .app-shell .alert-success { background: #d1fae5; color: #065f46; } .app-shell .alert-warning { background: #fef3c7; color: #92400e; } .app-shell .alert-info { background: #dbeafe; color: #1e40af; } .app-shell .form-group { margin-bottom: 1.5rem; } .app-shell label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; } .app-shell input[type="radio"] { margin-right: 0.5rem; } .app-shell textarea { width: 100%; padding: 0.75rem; border: 2px solid var(--heqaf-border); border-radius: var(--heqaf-radius); min-height: 200px; font-family: inherit; } .app-shell textarea.textarea--compact { min-height: 120px; } .app-shell .form-select, .app-shell .form-input { padding: 0.75rem; border: 2px solid var(--heqaf-border); border-radius: var(--heqaf-radius); width: 100%; font-family: inherit; } .app-shell .reviewers-list { background: var(--heqaf-bg); padding: 1rem; border-radius: var(--heqaf-radius); margin-bottom: 1rem; } .app-shell .reviewers-list p { margin: 0.5rem 0; color: var(--heqaf-muted); } .app-shell .abstract-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #f1f5f9; } .app-shell .discussion-bubble { background: #fff; border: 1px solid var(--heqaf-border); border-radius: var(--heqaf-radius); padding: 0.85rem 1rem; margin-bottom: 0.75rem; } .app-shell .discussion-bubble__sender { font-weight: 600; color: var(--heqaf-primary); } .app-shell .discussion-bubble__meta { font-size: 0.85rem; color: var(--heqaf-muted); margin-bottom: 0.35rem; } .app-shell .discussion-bubble__body { white-space: pre-wrap; color: var(--heqaf-text); } .app-shell .form-stack { margin-top: 1rem; } .app-shell .muted-link { color: var(--heqaf-muted); text-decoration: none; } .app-shell .muted-link:hover { text-decoration: underline; } .app-shell .nav-back { display: inline-block; margin-bottom: 2rem; } /* Utilities */ .app-shell .u-mb-2 { margin-bottom: 2rem; } .app-shell .u-mt-1 { margin-top: 1rem; } .app-shell .u-mt-2 { margin-top: 2rem; } .app-shell .u-ml-1 { margin-left: 1rem; } .app-shell .stack-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }