/* * cr-jobs Apply Modal — chrome only. * Inner form styling is inherited from CRF's default stylesheet. */ /* Progressive-enhancement: hide the page-level fallback form once this stylesheet loads. Non-JS / non-CSS clients still see the inline form. */ .cr-jobs-apply-fallback { display: none; } /* Lock body scroll while modal is open. JS sets this class on . */ .cr-jobs-apply-modal-scroll-lock { overflow: hidden !important; } /* Root container. We append one instance per-open to . */ .cr-jobs-apply-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; /* Start hidden; .is-open flips visibility. */ visibility: hidden; } .cr-jobs-apply-modal.is-open { visibility: visible; pointer-events: auto; } /* Backdrop */ .cr-jobs-apply-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.55); opacity: 0; transition: opacity 200ms ease; cursor: pointer; } .cr-jobs-apply-modal.is-open .cr-jobs-apply-modal__backdrop { opacity: 1; } .cr-jobs-apply-modal.is-closing .cr-jobs-apply-modal__backdrop { opacity: 0; } /* Dialog — mobile-first: bottom sheet, full-height. */ .cr-jobs-apply-modal__dialog { position: relative; z-index: 1; background: #fff; color: #0a0e16; width: 100%; max-width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); /* Respect iOS home indicator. */ padding-bottom: env(safe-area-inset-bottom, 0); } .cr-jobs-apply-modal.is-open .cr-jobs-apply-modal__dialog { transform: translateY(0); } .cr-jobs-apply-modal.is-closing .cr-jobs-apply-modal__dialog { transform: translateY(100%); } /* Tablet / desktop — centred modal with scale-in. */ @media (min-width: 768px) { .cr-jobs-apply-modal { align-items: center; padding: 24px; } .cr-jobs-apply-modal__dialog { max-width: 640px; max-height: 90vh; border-radius: 16px; transform: translateY(0) scale(0.96); opacity: 0; transition: opacity 200ms ease, transform 200ms ease; } .cr-jobs-apply-modal.is-open .cr-jobs-apply-modal__dialog { transform: translateY(0) scale(1); opacity: 1; } .cr-jobs-apply-modal.is-closing .cr-jobs-apply-modal__dialog { transform: translateY(0) scale(0.96); opacity: 0; } } /* Header */ .cr-jobs-apply-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(10, 14, 22, 0.08); flex: 0 0 auto; } .cr-jobs-apply-modal__title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; } .cr-jobs-apply-modal__close { appearance: none; background: transparent; border: 0; color: #0a0e16; width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 120ms ease; } .cr-jobs-apply-modal__close:hover, .cr-jobs-apply-modal__close:focus-visible { background: rgba(10, 14, 22, 0.06); outline: none; } .cr-jobs-apply-modal__close:focus-visible { box-shadow: 0 0 0 2px #4f46e5; } /* Body */ .cr-jobs-apply-modal__body { position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; flex: 1 1 auto; } .cr-jobs-apply-modal__context { margin: 0 0 16px; font-size: 15px; color: rgba(10, 14, 22, 0.78); } .cr-jobs-apply-modal__context strong { color: #0a0e16; } /* State-driven visibility. idle shows the form + context. */ .cr-jobs-apply-modal[data-state="submitting"] .cr-jobs-apply-modal__submitting { display: flex; } .cr-jobs-apply-modal[data-state="success"] .cr-jobs-apply-modal__context, .cr-jobs-apply-modal[data-state="success"] .cr-jobs-apply-modal__form-slot, .cr-jobs-apply-modal[data-state="success"] .cr-jobs-apply-modal__banner { display: none !important; } .cr-jobs-apply-modal[data-state="success"] .cr-jobs-apply-modal__success { display: flex; } /* Error banner (idle/error state). */ .cr-jobs-apply-modal__banner { margin: 0 0 16px; padding: 12px 14px; background: #fff3f3; border: 1px solid #f2c2c2; border-radius: 8px; color: #8b1f1f; font-size: 14px; line-height: 1.45; } .cr-jobs-apply-modal__banner[hidden] { display: none; } /* Submitting overlay — covers the form area only. */ .cr-jobs-apply-modal__submitting { display: none; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(1px); flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 14px; color: rgba(10, 14, 22, 0.78); z-index: 2; } .cr-jobs-apply-modal__spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(99, 102, 241, 0.2); border-top-color: #4f46e5; animation: cr-jobs-apply-modal-spin 0.8s linear infinite; } @keyframes cr-jobs-apply-modal-spin { to { transform: rotate(360deg); } } /* Success panel */ .cr-jobs-apply-modal__success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 24px 8px 8px; color: #0a0e16; } .cr-jobs-apply-modal__check { color: #16a34a; margin-bottom: 12px; } .cr-jobs-apply-modal__success-title { margin: 0 0 8px; font-size: 22px; font-weight: 600; } .cr-jobs-apply-modal__success-message { margin: 0 0 20px; font-size: 15px; color: rgba(10, 14, 22, 0.78); max-width: 36ch; } .cr-jobs-apply-modal__success-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; } .cr-jobs-apply-modal__reset { appearance: none; border: 0; background: #0a0e16; color: #fff; font: inherit; font-weight: 600; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background-color 120ms ease; } .cr-jobs-apply-modal__reset:hover, .cr-jobs-apply-modal__reset:focus-visible { background: #4f46e5; outline: none; } .cr-jobs-apply-modal__close-link { appearance: none; border: 0; background: transparent; color: rgba(10, 14, 22, 0.7); font: inherit; padding: 8px 12px; cursor: pointer; text-decoration: underline; } .cr-jobs-apply-modal__close-link:hover, .cr-jobs-apply-modal__close-link:focus-visible { color: #0a0e16; outline: none; } /* Screen-reader-only live regions. */ .cr-jobs-apply-modal__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Disable submit inside modal while submitting. */ .cr-jobs-apply-modal[data-state="submitting"] .cr-jobs-apply-modal__form-slot .crf-submit-btn { opacity: 0.6; pointer-events: none; } /* Ensure the injected file input is visible and reasonable. */ .cr-jobs-apply-modal__form-slot .crf-file-input { display: block; width: 100%; font-size: 14px; padding: 8px 0; } /* Per-field error messages (reuse CRF class if possible). */ .cr-jobs-apply-modal__form-slot .crf-field-error { color: #8b1f1f; font-size: 13px; margin-top: 4px; } .cr-jobs-apply-modal__form-slot .crf-field-invalid { border-color: #c84040 !important; } /* Respect reduced-motion. */ @media (prefers-reduced-motion: reduce) { .cr-jobs-apply-modal__backdrop, .cr-jobs-apply-modal__dialog { transition: none !important; } .cr-jobs-apply-modal__spinner { animation: none !important; border-top-color: transparent; } } /* ───────────────────────────────────────────────────────────────────────── Form styling — professional look inside the modal. Scoped to .cr-jobs-apply-modal so we don't touch the fallback form or CRF's own shortcode output elsewhere on the site. ───────────────────────────────────────────────────────────────────────── */ /* Hide CRF's own form title + description inside the modal — the modal header ("Apply for this role") + applicant context line already carry that meaning. Avoids visual stacking of redundant headings. */ .cr-jobs-apply-modal__form-slot .crf-form-title, .cr-jobs-apply-modal__form-slot .crf-form-description { display: none; } /* Reset the form container so our field styles don't inherit stray margins. */ .cr-jobs-apply-modal__form-slot .crf-form { margin: 0; padding: 0; display: block; font-size: 15px; color: #18202c; } /* Field group — stacked label-over-input layout. */ .cr-jobs-apply-modal__form-slot .crf-field-group { display: block; margin: 0 0 18px; padding: 0; border: 0; } .cr-jobs-apply-modal__form-slot .crf-field-group:last-of-type { margin-bottom: 8px; } /* Labels — above the input, clear hierarchy. */ .cr-jobs-apply-modal__form-slot .crf-field-label { display: block; font-size: 13px; font-weight: 600; color: #334055; letter-spacing: 0.01em; margin: 0 0 6px; line-height: 1.3; } .cr-jobs-apply-modal__form-slot .crf-required { color: #c84040; margin-left: 2px; font-weight: 700; } /* Text / email / tel / number / url inputs — uniform pill-box style. */ .cr-jobs-apply-modal__form-slot .crf-input, .cr-jobs-apply-modal__form-slot .crf-textarea, .cr-jobs-apply-modal__form-slot .crf-select, .cr-jobs-apply-modal__form-slot input[type="text"], .cr-jobs-apply-modal__form-slot input[type="email"], .cr-jobs-apply-modal__form-slot input[type="tel"], .cr-jobs-apply-modal__form-slot input[type="url"], .cr-jobs-apply-modal__form-slot input[type="number"], .cr-jobs-apply-modal__form-slot input[type="date"] { width: 100%; display: block; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 16px; /* 16px prevents iOS zoom on focus */ line-height: 1.4; color: #18202c; background-color: #fff; border: 1px solid #cdd5e0; border-radius: 8px; box-shadow: 0 1px 2px rgba(10, 14, 22, 0.04); transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .cr-jobs-apply-modal__form-slot .crf-textarea { min-height: 108px; resize: vertical; } /* Placeholder — subtle. */ .cr-jobs-apply-modal__form-slot .crf-input::placeholder, .cr-jobs-apply-modal__form-slot .crf-textarea::placeholder, .cr-jobs-apply-modal__form-slot input::placeholder { color: #8a96a8; opacity: 1; } /* Hover — subtle border bump. */ .cr-jobs-apply-modal__form-slot .crf-input:hover, .cr-jobs-apply-modal__form-slot .crf-textarea:hover, .cr-jobs-apply-modal__form-slot input:hover:not([type="file"]):not([type="submit"]):not([type="button"]) { border-color: #9ba7bc; } /* Focus — clear ring, no browser default outline. */ .cr-jobs-apply-modal__form-slot .crf-input:focus, .cr-jobs-apply-modal__form-slot .crf-textarea:focus, .cr-jobs-apply-modal__form-slot .crf-select:focus, .cr-jobs-apply-modal__form-slot input:focus:not([type="file"]):not([type="submit"]):not([type="button"]) { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } /* File upload — custom button-style, shows chosen file. */ .cr-jobs-apply-modal__form-slot .crf-file-input, .cr-jobs-apply-modal__form-slot input[type="file"] { display: block; width: 100%; box-sizing: border-box; max-width: 100%; font: inherit; font-size: 14px; color: #334055; padding: 10px 12px; background-color: #f6f8fb; border: 1px dashed #c2cdde; border-radius: 8px; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .cr-jobs-apply-modal__form-slot .crf-file-input:hover, .cr-jobs-apply-modal__form-slot input[type="file"]:hover { border-color: #4f46e5; background-color: #eef2ff; } .cr-jobs-apply-modal__form-slot .crf-file-input:focus, .cr-jobs-apply-modal__form-slot input[type="file"]:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } /* WebKit file-input button */ .cr-jobs-apply-modal__form-slot input[type="file"]::-webkit-file-upload-button { font: inherit; font-size: 13px; font-weight: 600; color: #4f46e5; background-color: #fff; border: 1px solid #c2cdde; border-radius: 6px; padding: 6px 12px; margin-right: 12px; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .cr-jobs-apply-modal__form-slot input[type="file"]::-webkit-file-upload-button:hover { background-color: #eef2ff; border-color: #4f46e5; } /* Help text under fields. */ .cr-jobs-apply-modal__form-slot .crf-field-help { font-size: 12px; color: #6b7588; margin-top: 6px; line-height: 1.4; } /* Submit button — big, primary, full-width on mobile. */ .cr-jobs-apply-modal__form-slot .crf-submit-btn, .cr-jobs-apply-modal__form-slot button[type="submit"], .cr-jobs-apply-modal__form-slot input[type="submit"] { display: block; width: 100%; margin-top: 20px; padding: 13px 20px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: #fff; background-color: #4f46e5; background-image: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); border: 1px solid #4338ca; border-radius: 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(10, 14, 22, 0.06), 0 4px 12px rgba(99, 102, 241, 0.18); transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease; -webkit-appearance: none; appearance: none; } .cr-jobs-apply-modal__form-slot .crf-submit-btn:hover, .cr-jobs-apply-modal__form-slot button[type="submit"]:hover, .cr-jobs-apply-modal__form-slot input[type="submit"]:hover { background-image: linear-gradient(180deg, #818cf8 0%, #6366f1 100%); box-shadow: 0 1px 2px rgba(10, 14, 22, 0.06), 0 6px 16px rgba(99, 102, 241, 0.24); } .cr-jobs-apply-modal__form-slot .crf-submit-btn:active, .cr-jobs-apply-modal__form-slot button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(10, 14, 22, 0.08); } .cr-jobs-apply-modal__form-slot .crf-submit-btn:focus-visible, .cr-jobs-apply-modal__form-slot button[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 6px 16px rgba(99, 102, 241, 0.24); } .cr-jobs-apply-modal__form-slot .crf-submit-btn[disabled], .cr-jobs-apply-modal__form-slot button[type="submit"][disabled] { opacity: 0.72; cursor: progress; transform: none; } /* Radio / checkbox groups — tidy alignment. */ .cr-jobs-apply-modal__form-slot .crf-choices { display: flex; flex-direction: column; gap: 8px; } .cr-jobs-apply-modal__form-slot .crf-choice-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #18202c; cursor: pointer; } .cr-jobs-apply-modal__form-slot .crf-choice-input { width: 18px; height: 18px; accent-color: #4f46e5; cursor: pointer; } /* Two-column layout on wider screens: email + phone side by side, role + city side by side. Stays single-column on mobile. */ @media (min-width: 620px) { .cr-jobs-apply-modal__form-slot .crf-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 0; } /* All fields span both columns by default. */ .cr-jobs-apply-modal__form-slot .crf-field-group { grid-column: 1 / -1; } /* Email + phone share a row. */ .cr-jobs-apply-modal__form-slot .crf-field-group:has(input[name="email"]), .cr-jobs-apply-modal__form-slot .crf-field-group:has(input[name="role"]) { grid-column: 1; } .cr-jobs-apply-modal__form-slot .crf-field-group:has(input[name="phone"]), .cr-jobs-apply-modal__form-slot .crf-field-group:has(input[name="city"]) { grid-column: 2; } /* Submit + file input span full width. */ .cr-jobs-apply-modal__form-slot button[type="submit"], .cr-jobs-apply-modal__form-slot .crf-submit-btn { grid-column: 1 / -1; } } /* Banner error inside the form slot (whole-form validation) */ .cr-jobs-apply-modal__form-slot .crf-form-error, .cr-jobs-apply-modal__form-slot .crf-error-banner { margin: 0 0 16px; padding: 10px 14px; background-color: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #c84040; border-radius: 6px; color: #8b1f1f; font-size: 14px; line-height: 1.4; } /* Tighter spacing for the applicant-context line in header */ .cr-jobs-apply-modal__context { color: #4b5668; font-size: 14px; line-height: 1.5; } .cr-jobs-apply-modal__context strong { color: #18202c; font-weight: 600; }