/** * SmartRecruiters Jobs widget styles. * Scoped under .srj-* and themeable via CSS custom properties. */ /* Custom properties are defined on both the inline app and the modal overlay, * because the overlay is appended to (outside .srj-app) so it would not * otherwise inherit them. */ .srj-app, .srj-overlay { --srj-accent: #78006c; /* Better Rehab purple */ --srj-accent-hover: #5c0053; /* fallback for browsers without color-mix */ --srj-accent-hover: color-mix(in srgb, var(--srj-accent), #000 16%); --srj-accent-2: #3fd8ed; /* Better Rehab cyan */ --srj-text: #282828; --srj-muted: #585e6a; --srj-border: #e6e2e9; --srj-bg: #ffffff; --srj-bg-soft: #f7f4f8; --srj-radius: 14px; --srj-shadow: 0 10px 34px rgba(40, 0, 56, 0.12); --srj-error: #c0392b; --srj-success: #1a7f4b; --srj-font-heading: inherit; /* set via the "Heading font" setting */ } /* Display font for headings, prominent buttons and the filter controls. Body * copy, form labels and inputs keep the theme's body font. */ .srj-card-title, .srj-modal-title, .srj-section-title, .srj-form-title, .srj-row-title, .srj-card-cta, .srj-filters-btn, .srj-submit, .srj-apply-cta, .srj-row-apply, .srj-table thead th { font-family: var(--srj-font-heading); } .srj-app { color: var(--srj-text); font-size: 16px; line-height: 1.5; } .srj-overlay { color: var(--srj-text); font-size: 16px; line-height: 1.5; } .srj-app *, .srj-overlay * { box-sizing: border-box; } /* Toolbar */ .srj-toolbar { margin-bottom: 22px; } .srj-toolbar-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .srj-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 280px; } .srj-ico { display: inline-flex; align-items: center; } .srj-ico-search { position: absolute; left: 15px; color: var(--srj-muted); pointer-events: none; } .srj-search { width: 100%; padding: 12px 14px 12px 44px; border: 1px solid var(--srj-border); border-radius: 12px; font-size: 15px; font-family: inherit; background: var(--srj-bg); color: var(--srj-text); } .srj-search:focus { outline: 2px solid var(--srj-accent); outline-offset: 1px; border-color: var(--srj-accent); } .srj-filters-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid var(--srj-border); border-radius: 12px; background: var(--srj-bg); color: var(--srj-text); font-family: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .srj-filters-btn:hover { border-color: var(--srj-accent); color: var(--srj-accent); } .srj-filters-badge { background: var(--srj-accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .srj-filters-badge[hidden] { display: none; } .srj-count { color: var(--srj-muted); font-size: 14px; margin-left: auto; white-space: nowrap; } .srj-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .srj-chips:not(:empty) { margin-top: 14px; } .srj-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 12px; background: var(--srj-bg-soft); border: 1px solid var(--srj-border); border-radius: 999px; font-size: 13px; color: var(--srj-text); } .srj-chip button { background: none; border: none; cursor: pointer; color: var(--srj-muted); font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 50%; } .srj-chip button:hover { color: var(--srj-error); } .srj-chip-clear { background: none; border: none; color: var(--srj-accent); font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 5px 8px; } .srj-chip-clear:hover { text-decoration: underline; } @media (max-width: 600px) { .srj-count { margin-left: 0; width: 100%; order: 3; } .srj-filters-btn { flex: 1 1 auto; justify-content: center; } } /* Filter & sort modal */ .srj-filter-form { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; } .srj-filter-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: var(--srj-text); } .srj-filter-select { width: 100%; padding: 11px 13px; border: 1px solid var(--srj-border); border-radius: 10px; font-size: 15px; font-family: inherit; background: var(--srj-bg); color: var(--srj-text); } .srj-filter-select:focus { outline: 2px solid var(--srj-accent); outline-offset: 1px; border-color: var(--srj-accent); } .srj-filter-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--srj-border); } .srj-link-btn { background: none; border: none; color: var(--srj-muted); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 8px 4px; } .srj-link-btn:hover { color: var(--srj-accent); } .srj-status { color: var(--srj-muted); padding: 24px 0; } /* List */ .srj-list { display: grid; gap: 16px; } .srj-cols-2 .srj-list, .srj-list.srj-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srj-list.srj-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .srj-list.srj-cols-1 { grid-template-columns: 1fr; } @media (max-width: 781px) { .srj-list.srj-cols-2, .srj-list.srj-cols-3 { grid-template-columns: 1fr; } } .srj-card { background: var(--srj-bg); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px 22px 20px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; display: flex; flex-direction: column; gap: 12px; } .srj-card:hover, .srj-card:focus-visible { transform: translateY(-3px); box-shadow: var(--srj-shadow); border-color: var(--srj-accent); outline: none; } .srj-card-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 650; color: var(--srj-text); } .srj-card-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; } .srj-meta-item { font-size: 13.5px; color: var(--srj-muted); display: inline-flex; align-items: center; } .srj-meta-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--srj-accent-2); margin-right: 7px; opacity: 0.95; } .srj-card-cta { color: var(--srj-accent); font-weight: 600; font-size: 14.5px; } .srj-empty { color: var(--srj-muted); padding: 24px 0; grid-column: 1 / -1; } /* Table layout */ .srj-list-table { display: block; } .srj-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .srj-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--srj-bg); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); overflow: hidden; font-size: 15px; } .srj-table thead th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--srj-muted); font-weight: 700; padding: 14px 16px; background: var(--srj-bg-soft); border-bottom: 1px solid var(--srj-border); white-space: nowrap; } .srj-table tbody td { padding: 15px 16px; border-bottom: 1px solid var(--srj-border); vertical-align: middle; color: var(--srj-text); } .srj-col-type { white-space: nowrap; } .srj-table tbody tr:last-child td { border-bottom: none; } .srj-table tbody tr.srj-row { cursor: pointer; transition: background 0.12s ease; } .srj-table tbody tr.srj-row:hover { background: var(--srj-bg-soft); } .srj-cell-title { min-width: 170px; } .srj-row-title { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; font-weight: 650; font-size: 16px; line-height: 1.3; color: var(--srj-text); text-align: left; } .srj-table tbody tr.srj-row:hover .srj-row-title { color: var(--srj-accent); } .srj-row-ref { display: block; font-size: 12.5px; color: var(--srj-muted); margin-top: 3px; font-weight: 400; } .srj-loc-cell { color: var(--srj-text); } .srj-pill { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; vertical-align: middle; background: #e2f7fc; background: color-mix(in srgb, var(--srj-accent-2), #fff 80%); color: #0a6378; } .srj-pill-alt { background: #f3e3f1; background: color-mix(in srgb, var(--srj-accent), #fff 88%); color: var(--srj-accent); } .srj-col-dept, .srj-col-type { color: var(--srj-muted); } .srj-col-action { text-align: right; width: 1%; white-space: nowrap; } .srj-row-apply { display: inline-flex; align-items: center; background: var(--srj-accent); color: #fff; border: none; border-radius: 9px; padding: 9px 18px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s ease; } .srj-row-apply:hover { background: var(--srj-accent-hover); } .srj-table button:focus-visible { outline: 2px solid var(--srj-accent); outline-offset: 2px; border-radius: 6px; } /* Narrow screens: table collapses into stacked cards */ @media (max-width: 720px) { .srj-table { border: none; background: transparent; } .srj-table thead { display: none; } .srj-table tbody, .srj-table tbody tr.srj-row, .srj-table tbody td { display: block; width: auto; } .srj-table tbody tr.srj-row { background: var(--srj-bg); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 16px 18px; margin-bottom: 14px; } .srj-table tbody tr.srj-row:hover { background: var(--srj-bg); } .srj-table tbody td { border: none !important; padding: 3px 0; } .srj-table tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--srj-muted); font-weight: 700; margin-bottom: 1px; } .srj-cell-title::before { display: none; } .srj-col-action { text-align: left; width: auto; margin-top: 12px; } .srj-row-apply { width: 100%; justify-content: center; padding: 12px; } } /* Pagination */ .srj-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 24px; } /* display: flex beats the hidden attribute without this override. */ .srj-pager[hidden] { display: none; } .srj-page-btn { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--srj-border); background: var(--srj-bg); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--srj-text); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .srj-page-btn:hover:not(:disabled):not(.srj-page-current) { border-color: var(--srj-accent); color: var(--srj-accent); } .srj-page-btn:disabled { opacity: 0.4; cursor: default; } .srj-page-btn:focus-visible { outline: 2px solid var(--srj-accent); outline-offset: 2px; } .srj-page-current { background: var(--srj-accent); border-color: var(--srj-accent); color: #fff; } .srj-page-nav { font-size: 20px; line-height: 1; } .srj-page-gap { color: var(--srj-muted); padding: 0 2px; user-select: none; } /* Modal */ body.srj-modal-open { overflow: hidden; } .srj-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; z-index: 999999; overflow-y: auto; -webkit-overflow-scrolling: touch; } .srj-dialog { position: relative; background: var(--srj-bg); border-radius: 18px; width: 100%; max-width: 760px; box-shadow: 0 24px 70px rgba(16, 24, 40, 0.35); margin: auto; } .srj-dialog-inner { padding: 36px 40px 40px; max-height: 92vh; overflow-y: auto; } @media (max-width: 600px) { .srj-dialog-inner { padding: 26px 20px 30px; } } .srj-close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: none; background: var(--srj-bg-soft); border-radius: 50%; font-size: 26px; line-height: 1; color: var(--srj-muted); cursor: pointer; z-index: 2; } .srj-close:hover { background: #ebeef3; color: var(--srj-text); } .srj-modal-title { margin: 0 40px 6px 0; font-size: 27px; line-height: 1.25; font-weight: 700; } /* Full-screen focus mode (Settings > Job view, or view="fullscreen") */ .srj-overlay-full { background: var(--srj-bg); padding: 0; align-items: stretch; } .srj-dialog-full { width: 100%; max-width: none; min-height: 100%; margin: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; animation: srjFullIn 0.28s ease; } /* Slim brand accent along the top edge. */ .srj-dialog-full::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--srj-accent), var(--srj-accent-2)); z-index: 4; } .srj-full-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); background: var(--srj-bg); border-bottom: 1px solid var(--srj-border); } .srj-full-back { background: none; border: none; color: var(--srj-accent); font-family: var(--srj-font-heading, inherit); font-size: 15px; font-weight: 650; cursor: pointer; padding: 8px 0; } .srj-full-back:hover { text-decoration: underline; } .srj-full-bar .srj-close { position: static; flex: none; } .srj-dialog-full .srj-dialog-inner { max-height: none; overflow: visible; width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(28px, 6vh, 54px) clamp(18px, 4vw, 40px) 110px; } .srj-dialog-full .srj-modal-title { margin: 0 0 10px; font-size: clamp(29px, 4.5vw, 40px); letter-spacing: -0.01em; } .srj-dialog-full .srj-job-meta { padding-bottom: 22px; margin-bottom: 26px; } .srj-dialog-full .srj-section-title { font-size: 20px; } @keyframes srjFullIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .srj-dialog-full { animation: none; } } .srj-job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0 18px; border-bottom: 1px solid var(--srj-border); margin-bottom: 20px; } .srj-section { margin-bottom: 22px; } .srj-section-title { font-size: 18px; font-weight: 650; margin: 0 0 8px; } .srj-section-body { color: #2c333f; } .srj-section-body ul, .srj-section-body ol { padding-left: 1.3em; } .srj-section-body p { margin: 0 0 10px; } /* Conditional questions (hidden until their trigger answer is chosen) */ .srj-question[hidden] { display: none; } /* Job-ad video embeds */ .srj-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 14px; border-radius: 12px; overflow: hidden; background: #000; } .srj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Two-step views (description -> apply form) */ .srj-view { min-height: 10px; } .srj-apply-bar { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--srj-border); display: flex; } .srj-apply-bar-top { margin-top: 0; margin-bottom: 24px; padding-top: 0; border-top: none; } .srj-apply-cta { font-size: 17px; padding: 15px 34px; } .srj-back-link { background: none; border: none; color: var(--srj-accent); font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 0 0 14px; font-family: inherit; } .srj-back-link:hover { text-decoration: underline; } @keyframes srjSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .srj-view-form.srj-slide-in { animation: srjSlideIn 0.32s ease; } @media (prefers-reduced-motion: reduce) { .srj-view-form.srj-slide-in { animation: none; } } /* Form */ .srj-form { margin-top: 4px; } .srj-draft-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--srj-accent-2), #fff 82%); border: 1px solid color-mix(in srgb, var(--srj-accent-2), #fff 55%); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; color: #0a5e72; } .srj-draft-note .srj-link-btn { color: var(--srj-accent); padding: 2px 4px; } .srj-form-title { font-size: 21px; font-weight: 700; margin: 0 0 16px; } .srj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 540px) { .srj-grid { grid-template-columns: 1fr; } } .srj-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .srj-grid .srj-field { margin-bottom: 0; } .srj-label { font-size: 14px; font-weight: 600; color: var(--srj-text); } .srj-req { color: var(--srj-error); } .srj-field input[type="text"], .srj-field input[type="email"], .srj-field input[type="tel"], .srj-field input[type="url"], .srj-field input[type="file"], .srj-field select, .srj-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--srj-border); border-radius: 10px; font-size: 15px; font-family: inherit; background: var(--srj-bg); color: var(--srj-text); } .srj-field textarea { resize: vertical; min-height: 96px; } .srj-field input:focus, .srj-field select:focus, .srj-field textarea:focus { outline: 2px solid var(--srj-accent); outline-offset: 1px; border-color: var(--srj-accent); } .srj-hint { font-size: 12.5px; color: var(--srj-muted); margin: 0; } .srj-field-error { color: var(--srj-error); font-size: 13px; margin: 0; } .srj-has-error input, .srj-has-error select, .srj-has-error textarea { border-color: var(--srj-error); } .srj-has-error.srj-check span { color: var(--srj-error); } /* Choice groups */ .srj-radios, .srj-checks { display: flex; flex-direction: column; gap: 8px; } .srj-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; cursor: pointer; font-weight: 400; } .srj-check input { margin-top: 3px; flex: 0 0 auto; } /* Question groups. Radio and multi-checkbox questions use fieldset/legend * for accessible group semantics; reset the defaults so they look exactly * like the label + group pattern of the other fields. */ .srj-field-group { display: block; border: none; padding: 0; margin: 0 0 16px; min-width: 0; background: transparent; } .srj-field-group legend { display: block; width: 100%; padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--srj-text); } .srj-field-group .srj-field-error { margin-top: 6px; } /* Question heading: multi-field questions carry the question label once, * above their fields, styled like a field label. */ .srj-q-heading { font-size: 14px; font-weight: 600; color: var(--srj-text); margin: 0 0 6px; } /* Question description hint (from the Apply config). */ .srj-q-desc { font-size: 12.5px; color: var(--srj-muted); margin: -2px 0 10px; } /* Muted sub-label: a field label shown under the question label when both * say something different. */ .srj-sub-label { font-size: 12.5px; color: var(--srj-muted); margin: -2px 0 4px; } /* Inline tag for AI-assisted screening questions. */ .srj-ai-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--srj-border); border-radius: 999px; background: var(--srj-bg-soft); color: var(--srj-muted); font-size: 11.5px; font-weight: 500; line-height: 1.6; vertical-align: middle; white-space: nowrap; } /* Repeatable questions (multi-entry screening answers) */ .srj-record { display: flex; flex-direction: column; } .srj-record + .srj-record { margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--srj-border); } .srj-repeat-add, .srj-repeat-remove { background: none; border: none; color: var(--srj-accent); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 6px 4px; } .srj-repeat-add { margin: -6px 0 16px; } .srj-repeat-add:hover { text-decoration: underline; } .srj-repeat-remove { color: var(--srj-muted); font-size: 13px; align-self: flex-start; } .srj-repeat-remove:hover { color: var(--srj-error); } /* At the 10-record server cap the add button turns into a muted note. */ .srj-repeat-add:disabled { color: var(--srj-muted); cursor: default; text-decoration: none; } /* Voluntary diversity questions: separated at the end of the question list, * under SmartRecruiters' mandatory heading and instruction. */ .srj-diversity { background: var(--srj-bg-soft); border: 1px solid var(--srj-border); border-radius: 12px; padding: 18px; margin: 26px 0 20px; } .srj-diversity-heading { font-family: var(--srj-font-heading, inherit); font-size: 16px; color: var(--srj-text); margin: 0 0 8px; } .srj-diversity-notice { font-size: 13.5px; color: var(--srj-muted); margin: 0 0 16px; } .srj-diversity .srj-question:last-child .srj-field { margin-bottom: 0; } /* "Remember my details" persistence opt-in */ .srj-remember { font-size: 13.5px; color: var(--srj-muted); margin: 2px 0 16px; } /* Consent */ .srj-consent { background: var(--srj-bg-soft); border-radius: 12px; padding: 16px 18px; margin: 4px 0 20px; display: flex; flex-direction: column; gap: 10px; } .srj-consent-desc, .srj-policies { font-size: 13.5px; color: var(--srj-muted); margin: 0; } .srj-policies a { color: var(--srj-accent); } .srj-ai-disclosure { font-size: 12.5px; color: var(--srj-muted); margin: -8px 0 18px; } /* Honeypot */ .srj-hp-wrap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } /* Cloudflare Turnstile challenge (min-height limits layout shift while the * widget loads). */ .srj-turnstile { margin: 4px 0 18px; min-height: 65px; } /* Form unavailable (the Apply config never loaded): no inputs, just a notice * plus the ways out. */ .srj-form-unavailable { background: var(--srj-bg-soft); border: 1px solid var(--srj-border); border-radius: 12px; padding: 20px 22px; } .srj-form-unavailable-text { margin: 0; font-size: 15px; color: var(--srj-text); } .srj-form-unavailable .srj-fallback { margin: 12px 0 0; } .srj-form-unavailable .srj-submit { margin-top: 18px; } a.srj-submit { text-decoration: none; } /* Submit + messages */ .srj-submit { display: inline-flex; align-items: center; justify-content: center; background: var(--srj-accent); color: #fff; border: none; border-radius: 11px; padding: 14px 28px; font-size: 16px; font-weight: 650; cursor: pointer; transition: background 0.15s ease; font-family: inherit; } .srj-submit:hover { background: var(--srj-accent-hover); } .srj-submit:disabled { opacity: 0.65; cursor: progress; } .srj-form-message { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14.5px; } .srj-msg-error { background: #fdecea; color: var(--srj-error); } .srj-msg-ok { background: #e8f6ee; color: var(--srj-success); } .srj-error { color: var(--srj-error); } .srj-fallback { margin: 10px 0 0; font-size: 14px; color: var(--srj-text); } .srj-fallback a { color: var(--srj-accent); font-weight: 600; } .srj-msg-error .srj-fallback { color: inherit; } .srj-modal-loading { padding: 40px 0; color: var(--srj-muted); text-align: center; } /* Submission status, rendered directly beneath the submit button. The form-level message sits at the top of the form, which on a phone is several screens away from someone who just submitted from the bottom of a long application, so live progress and form-level failures surface here instead, where the applicant is actually looking. */ /* An explicit display beats the UA stylesheet's [hidden] { display: none }, so the empty box rendered permanently below the submit button until this rule was added. Same trap applies to .srj-file-status below. */ .srj-submit-status[hidden], .srj-file-status[hidden] { display: none; } .srj-submit-status { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; /* Keeps scrollIntoView from parking this flush against the bottom edge of the viewport, which it otherwise does since this is the last element in the form. */ scroll-margin: 24px 0 32px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--srj-border); background: var(--srj-bg-soft); color: var(--srj-muted); font-size: 15px; line-height: 1.45; } .srj-submit-status-error { border-color: #b32d2e; color: #b32d2e; background: rgba(179, 45, 46, 0.06); } /* Motion is the point: a static line during a delivery poll reads as a frozen page. ::before keeps the spinner out of the announced text. */ .srj-submit-status-busy::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--srj-border); border-top-color: var(--srj-accent); animation: srjSpin 0.7s linear infinite; } @keyframes srjSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .srj-submit-status-busy::before { animation: none; } } /* Attachment state, shown under the file input while a picked file is being materialised and after it settles. A cloud-backed file can take seconds to fetch, and silence there reads as a broken form. */ .srj-file-status { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--srj-muted); } .srj-file-status-ok { color: var(--srj-success); } .srj-file-status-warn { color: #8a5a00; } .srj-file-status-busy::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--srj-border); border-top-color: var(--srj-accent); animation: srjSpin 0.7s linear infinite; } @media (prefers-reduced-motion: reduce) { .srj-file-status-busy::before { animation: none; } } /* Diagnostic copy control, present only in a diagnostic log level. */ .srj-journal-copy { display: block; margin: 10px auto 0; text-decoration: underline; } .srj-journal-dump { display: block; width: 100%; /* A crafted single-token journal must not widen the layout. */ overflow-wrap: anywhere; margin: 10px 0 0; padding: 10px; border: 1px solid var(--srj-border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.4; color: var(--srj-muted); background: var(--srj-bg-soft); } /* Success */ .srj-success { text-align: center; /* The card is the whole screen once the duplicate heading above it is hidden, so it carries its own vertical rhythm rather than sitting in the dead space the heading used to leave behind. */ padding: 8px 10px 24px; display: flex; flex-direction: column; align-items: center; } /* Received and safely queued, but delivery not yet confirmed. Deliberately not styled as an error: the application is durably stored either way. */ .srj-success-pending .srj-success-icon { background: var(--srj-bg-soft); color: var(--srj-accent); } .srj-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--srj-success); color: #fff; font-size: 34px; line-height: 64px; margin: 0 auto 16px; } .srj-success h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; } .srj-success h3:focus { outline: none; } .srj-success-msg { color: var(--srj-muted); margin: 0 auto 22px; max-width: 420px; } .srj-back { background: var(--srj-text); } .srj-back:hover { background: #000; } /* Admin notice (shown only to admins when unconfigured) */ .srj-notice { background: #fff8e5; border: 1px solid #f0d98a; border-radius: 8px; padding: 12px 16px; color: #6b5500; } /* ---------------------------------------------------------------------- Theme-bleed shield. Theme globals like ".entry-content button" outrank our single-class rules. The important bits get re-asserted below with a doubled root class to win that fight. No !important anywhere, so the admin Custom CSS box can still override any of it on purpose. ---------------------------------------------------------------------- */ /* Things themes set globally that nothing in the widget uses. */ .srj-app.srj-app button, .srj-overlay.srj-overlay button, .srj-app.srj-app input, .srj-overlay.srj-overlay input, .srj-app.srj-app select, .srj-overlay.srj-overlay select, .srj-app.srj-app textarea, .srj-overlay.srj-overlay textarea { text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; margin: 0; min-height: 0; line-height: 1.4; font-family: inherit; } .srj-app.srj-app button, .srj-overlay.srj-overlay button { appearance: none; -webkit-appearance: none; } /* Brand buttons keep their look under themed button globals. */ .srj-app.srj-app .srj-submit, .srj-overlay.srj-overlay .srj-submit, .srj-app.srj-app .srj-row-apply { background: var(--srj-accent); color: #fff; border: none; border-radius: 11px; padding: 14px 28px; font-size: 16px; font-weight: 650; font-family: var(--srj-font-heading); width: auto; } .srj-app.srj-app .srj-row-apply { border-radius: 9px; padding: 9px 18px; font-size: 14px; font-weight: 600; } .srj-app.srj-app .srj-submit:hover, .srj-overlay.srj-overlay .srj-submit:hover, .srj-app.srj-app .srj-row-apply:hover { background: var(--srj-accent-hover); color: #fff; } .srj-overlay.srj-overlay .srj-apply-cta { font-size: 17px; padding: 15px 34px; } .srj-app.srj-app .srj-filters-btn { background: var(--srj-bg); color: var(--srj-text); border: 1px solid var(--srj-border); border-radius: 12px; padding: 12px 18px; font-size: 14.5px; font-weight: 600; font-family: var(--srj-font-heading); width: auto; } .srj-app.srj-app .srj-page-btn { background: var(--srj-bg); color: var(--srj-text); border: 1px solid var(--srj-border); border-radius: 10px; padding: 0 10px; font-size: 14px; font-weight: 600; width: auto; min-width: 40px; height: 40px; } .srj-app.srj-app .srj-page-btn.srj-page-current { background: var(--srj-accent); border-color: var(--srj-accent); color: #fff; } .srj-overlay.srj-overlay .srj-close { background: var(--srj-bg-soft); color: var(--srj-muted); border: none; border-radius: 50%; width: 40px; height: 40px; padding: 0; font-size: 26px; line-height: 1; } .srj-app.srj-app .srj-row-title { background: none; border: none; padding: 0; font-size: 16px; font-weight: 650; font-family: var(--srj-font-heading); color: var(--srj-text); width: auto; text-align: left; } /* Inputs keep their look under themed input globals. */ .srj-app.srj-app .srj-search { width: 100%; padding: 12px 14px 12px 44px; border: 1px solid var(--srj-border); border-radius: 12px; font-size: 15px; background: var(--srj-bg); color: var(--srj-text); } .srj-overlay.srj-overlay .srj-field input[type="text"], .srj-overlay.srj-overlay .srj-field input[type="email"], .srj-overlay.srj-overlay .srj-field input[type="tel"], .srj-overlay.srj-overlay .srj-field input[type="url"], .srj-overlay.srj-overlay .srj-field input[type="file"], .srj-overlay.srj-overlay .srj-field select, .srj-overlay.srj-overlay .srj-field textarea, .srj-overlay.srj-overlay .srj-filter-select { width: 100%; padding: 11px 13px; border: 1px solid var(--srj-border); border-radius: 10px; font-size: 15px; background: var(--srj-bg); color: var(--srj-text); } /* The listing table keeps its look under themed table globals. */ .srj-app.srj-app .srj-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: var(--srj-bg); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); font-size: 15px; } .srj-app.srj-app .srj-table thead th { padding: 14px 16px; background: var(--srj-bg-soft); border: none; border-bottom: 1px solid var(--srj-border); color: var(--srj-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; } .srj-app.srj-app .srj-table tbody td { padding: 15px 16px; border: none; border-bottom: 1px solid var(--srj-border); background: transparent; color: var(--srj-text); } .srj-app.srj-app .srj-table tbody tr:last-child td { border-bottom: none; } /* Card titles under ".entry-content h3"-style theme rules. */ .srj-app.srj-app .srj-card-title { margin: 0; font-size: 19px; line-height: 1.3; text-transform: none; letter-spacing: normal; font-family: var(--srj-font-heading); } /* Pills keep their shape. */ .srj-app.srj-app .srj-pill, .srj-overlay.srj-overlay .srj-pill { border: none; text-transform: none; letter-spacing: normal; } /* Focus-mode back link keeps the heading font past the controls reset. */ .srj-overlay.srj-overlay .srj-full-back { background: none; border: none; color: var(--srj-accent); font-family: var(--srj-font-heading, inherit); font-size: 15px; font-weight: 650; width: auto; } /* Question-group fieldsets keep their reset under themed fieldset globals. */ .srj-app.srj-app .srj-field-group, .srj-overlay.srj-overlay .srj-field-group { border: none; padding: 0; margin: 0 0 16px; background: transparent; } .srj-app.srj-app .srj-field-group legend, .srj-overlay.srj-overlay .srj-field-group legend { padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--srj-text); text-transform: none; letter-spacing: normal; } /* Repeat-entry buttons keep their spacing past the controls margin reset. */ .srj-app.srj-app .srj-repeat-add, .srj-overlay.srj-overlay .srj-repeat-add { margin: -6px 0 16px; } /* Question headings and hints keep their look under themed paragraph rules. */ .srj-app.srj-app .srj-q-heading, .srj-overlay.srj-overlay .srj-q-heading { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--srj-text); text-transform: none; letter-spacing: normal; } .srj-app.srj-app .srj-q-desc, .srj-overlay.srj-overlay .srj-q-desc, .srj-app.srj-app .srj-sub-label, .srj-overlay.srj-overlay .srj-sub-label { font-size: 12.5px; color: var(--srj-muted); } /* The AI tag keeps its pill shape under themed span/border globals. */ .srj-app.srj-app .srj-ai-tag, .srj-overlay.srj-overlay .srj-ai-tag { border: 1px solid var(--srj-border); background: var(--srj-bg-soft); color: var(--srj-muted); text-transform: none; letter-spacing: normal; } /* The diversity block keeps its panel look under themed div/p globals. */ .srj-app.srj-app .srj-diversity, .srj-overlay.srj-overlay .srj-diversity { background: var(--srj-bg-soft); border: 1px solid var(--srj-border); border-radius: 12px; padding: 18px; } /* The external-apply link styled as a button escapes themed link rules. */ .srj-app.srj-app a.srj-submit, .srj-overlay.srj-overlay a.srj-submit { display: inline-flex; text-decoration: none; color: #fff; } .srj-app.srj-app a.srj-submit:hover, .srj-overlay.srj-overlay a.srj-submit:hover { text-decoration: none; color: #fff; } /* Touch devices: 16px form controls. * * iOS Safari zooms the whole page when a focused control has a font-size below * 16px, and the zoomed layout is then wider than the visual viewport, which is * what produces horizontal scrolling as soon as an applicant taps a field. The * page itself does not overflow: nothing here is wider than the viewport. 16px * is simply the threshold at which Safari stops zooming. * * pointer: coarse rather than a width breakpoint, because an iPad in landscape * is wider than most desktop breakpoints and zooms exactly the same way. Last * in the file so it wins the specificity tie with the overlay overrides above. */ @media (pointer: coarse) { .srj-app .srj-search, .srj-app .srj-filter-select, .srj-app .srj-field input[type], .srj-app .srj-field select, .srj-app .srj-field textarea, .srj-overlay.srj-overlay .srj-search, .srj-overlay.srj-overlay .srj-filter-select, .srj-overlay.srj-overlay .srj-field input[type], .srj-overlay.srj-overlay .srj-field select, .srj-overlay.srj-overlay .srj-field textarea { font-size: 16px; } }