--- a +++ b/web/hiring/hiring-modal.css @@ -0,0 +1,123 @@ +/* Modal Container */ +.modal-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +.modal-container.active { + opacity: 1; + visibility: visible; +} + +/* Modal Content */ +.modal-content { + background: var(--surface-color); + padding: 2rem; + border-radius: 12px; + max-width: 600px; + width: 100%; + position: relative; + box-shadow: 0 8px 32px rgba(0, 122, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { + transform: translateY(-20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Close Button */ +.close-modal { + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: none; + font-size: 1.5rem; + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + transition: color 0.3s ease; +} + +.close-modal:hover { + color: rgba(255, 255, 255, 1); +} + +/* Form Styles */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + color: rgba(255, 255, 255, 0.9); + font-size: 1.1rem; +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 1rem; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + color: white; + font-size: 1rem; + font-family: 'IBM Plex Mono', monospace; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--gradient-start); + box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); +} + +/* Submit Button */ +.primary-btn { + background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); + color: white; + border: none; + padding: 0.8rem 1.6rem; + border-radius: 8px; + font-size: 0.95rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; + min-width: 160px; + text-decoration: none; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.primary-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4); + filter: brightness(1.1); +}