/* ========================================================================== CRS Egypt — application form ========================================================================== The controls on job.php. Page chrome (masthead, tabs, facts, step rail) is in css/crs-job-page.css; the consent dialog, share buttons, language matrix and select2 skin are in css/crs-job-ui.css. WHAT IS NOT CHANGED No ids, no name attributes, no JavaScript hooks. This file styles the classes already in job.php: .form-group .control-label .form-control .select.minimal .crs-hidden .asteriskField .file-upload .container-checkbox Every field name reaching the database is untouched. Colours are CRS brand (25MK-1421830); text pairs are measured against the 4.5:1 floor that standard sets. ========================================================================== */ :root { --f-blue: #00468b; /* CRS Blue 9.34:1 on white */ --f-bold: #0068d2; /* Bold Blue 5.37:1 */ --f-red: #da291c; /* Emergency Red 4.87:1 */ --f-green: #5e7f24; /* Bold Green 4.63:1 */ --f-ink: #14161a; /* 16.9:1 */ --f-ink-2: #4a5260; /* 8.2:1 */ --f-ink-3: #6b7280; /* 4.8:1 — lightest permitted for text */ --f-line: #dfe3e8; --f-line-2: #c3c9d2; --f-bg: #f5f7fa; --f-panel: #ffffff; --f-r: 10px; --f-tap: 48px; /* WCAG 2.1 AA target size */ } /* ========================================================================== 1. The form shell ========================================================================== */ #applicationForm, #job_app, form.crs-application { max-width: 100%; margin: 0; } .form-group { display: block; margin: 0 0 22px; padding: 0; clear: both; } .form-group::after { content: ""; display: table; clear: both; } /* -------------------------------------------------------------------------- crs-hidden drives the multi-step flow. -------------------------------------------------------------------------- The show*() functions in job.php set element.style.display = "block" (CSSOM, so it is unaffected by style-src-attr 'none'). An inline declaration cannot beat an !important rule, so a plain `.crs-hidden { display:none !important }` made the reveal silently fail. The previous version of this file worked around that for `.form-group` only, which left the two Continue buttons — #ExperienceSecBttn and #CRSExperienceSecBttn, both bare inputs carrying .crs-hidden — permanently invisible. Stages 3 and 4 of the form could not be reached at all. The rule below matches ANY element the script has revealed, and restores the display type each one actually needs. -------------------------------------------------------------------------- */ .crs-hidden { display: none !important; } .crs-hidden.is-shown, .crs-hidden[style*="block"] { display: block !important; } /* Inputs are inline-block buttons, not blocks. */ input.crs-hidden.is-shown, input.crs-hidden[style*="block"], button.crs-hidden.is-shown, button.crs-hidden[style*="block"] { display: inline-flex !important; } /* ========================================================================== 2. Labels ========================================================================== */ .control-label, label.control-label { display: block; width: 100%; margin: 0 0 8px; padding: 0; font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--f-ink); } .asteriskField { margin-left: 3px; color: var(--f-red); font-weight: 700; } /* The hint under a field. It was a bare , inheriting whatever the surrounding stylesheet happened to set. */ .form-group > small, .crs-help { display: block; margin: 7px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--f-ink-3); } /* ========================================================================== 3. Fields ========================================================================== */ .form-control, input.form-control, select.form-control, textarea.form-control { display: block; width: 100%; min-height: var(--f-tap); padding: 12px 14px; margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--f-ink); background: var(--f-panel); border: 1px solid var(--f-line-2); border-radius: var(--f-r); box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color .12s ease, box-shadow .12s ease; } .form-control::placeholder { color: var(--f-ink-3); } .form-control:hover { border-color: var(--f-ink-3); } .form-control:focus { outline: none; border-color: var(--f-bold); box-shadow: 0 0 0 3px rgba(0,104,210,.18); } .form-control:disabled, .form-control[readonly] { background: var(--f-bg); color: var(--f-ink-3); cursor: not-allowed; } textarea.form-control { min-height: 128px; resize: vertical; } .form-control[type="number"] { -moz-appearance: textfield; } .form-control[type="number"]::-webkit-outer-spin-button, .form-control[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Native selects — the chevron is a data: URI, so no icon font is required. Where select2 takes over, its own skin in crs-job-ui.css applies instead. */ select.form-control, select.minimal { padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; } select.form-control::-ms-expand { display: none; } /* Date fields carry a calendar mark so they read as pickers before they are touched. flatpickr opens on focus; typing still works. */ input.crs-date, input.js-datepicker { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; } /* If flatpickr could not load, js/crs-datepickers.js switches the field to type="date" and adds this class. The browser then draws its own calendar button, so ours has to go - otherwise the field shows two calendar icons side by side, which is what the last build did. */ input.crs-date--native, input.crs-date--native.js-datepicker { background-image: none; padding-right: 14px; } /* ========================================================================== 4. Real-time validation ========================================================================== Driven by js/crs-form-ux.js. A field is judged when it loses focus, and re-judged on every keystroke afterwards — so nobody is told they are wrong while still typing the first character, and a correction clears the error immediately rather than at submit. ========================================================================== */ .form-control.is-invalid, .form-control.is-invalid:hover { border-color: var(--f-red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23da291c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2h.01'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .form-control.is-invalid:focus { border-color: var(--f-red); box-shadow: 0 0 0 3px rgba(218,41,28,.16); } .form-control.is-valid { border-color: #a9c37a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235e7f24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .form-control.is-valid:focus { border-color: var(--f-green); box-shadow: 0 0 0 3px rgba(94,127,36,.16); } /* A select keeps its chevron, so the state mark goes to the border alone — two glyphs in one corner is worse than none. */ select.form-control.is-invalid, select.form-control.is-valid, input.crs-date.is-invalid, input.crs-date.is-valid, input.js-datepicker.is-invalid, input.js-datepicker.is-valid { background-image: none; padding-right: 42px; } select.form-control.is-invalid, select.form-control.is-valid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; } .crs-error { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--f-red); } .crs-error::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23da291c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2h.01'/%3E%3C/svg%3E") no-repeat center / contain; } /* Field group that failed — label turns too, so the error is findable when the message itself is below the fold. */ .form-group.has-error > .control-label { color: var(--f-red); } /* Summary shown when submit is attempted with errors outstanding. */ .crs-form-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 20px; font-size: .9375rem; line-height: 1.5; color: var(--f-ink); background: #fdeceb; border: 1px solid #f2b8b3; border-radius: var(--f-r); } .crs-form-alert[hidden] { display: none; } .crs-form-alert svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--f-red); } .crs-form-alert p { margin: 0; } .crs-form-alert b { font-weight: 700; } .crs-form-alert a { color: var(--f-blue); font-weight: 700; } /* ========================================================================== 5. Two-column pairing ========================================================================== */ .crs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 20px; } /* ========================================================================== 6. Acknowledgment checkboxes ========================================================================== Three problems, all from css/style.css: · it hides the real control (`.container-checkbox input {position:absolute; opacity:0}`) expecting a .checkmark sprite that is not served, so the boxes were invisible; · it sets the label to 700 weight in a warm near-brown, so four legal paragraphs arrived as a wall of bold; · its selectors are more specific than a bare `.container-checkbox`, so the first attempt at fixing this lost the cascade. Every rule below is written at `.form-group .container-checkbox` or deeper, which outranks the theme, and the weight and colour are stated on the inner as well as the label - the theme sets both. ========================================================================== */ .form-group .container-checkbox, .container-checkbox { position: relative; display: flex; align-items: flex-start; gap: 16px; min-height: var(--f-tap); padding: 18px 20px; margin: 0 0 12px; font-size: .9375rem; font-weight: 400 !important; /* the theme sets 700 */ line-height: 1.65; color: var(--f-ink-2) !important; /* the theme sets a warm near-brown */ background: var(--f-panel); border: 1px solid var(--f-line); border-radius: var(--f-r); cursor: pointer; transition: border-color .12s ease, background-color .12s ease; } /* The theme styles the label; the text sits in a span inside it. */ .form-group .container-checkbox > span:not(.checkmark), .container-checkbox > span:not(.checkmark) { flex: 1 1 auto; min-width: 0; font-weight: 400 !important; color: var(--f-ink-2) !important; } .form-group .container-checkbox:hover, .container-checkbox:hover { border-color: var(--f-line-2); background: #fbfcfd; } /* The real control: present for the browser and for assistive technology, drawn by .checkmark. */ .form-group .container-checkbox input[type="checkbox"], .container-checkbox input[type="checkbox"] { position: absolute; top: 18px; left: 20px; width: 24px; height: 24px; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 1; } .form-group .container-checkbox .checkmark, .container-checkbox .checkmark { display: block !important; position: static !important; /* the theme pins it top-left */ top: auto !important; left: auto !important; order: -1; flex: 0 0 24px; width: 24px !important; height: 24px !important; min-width: 24px; min-height: 24px; margin-top: 1px; background: var(--f-panel) !important; border: 2px solid var(--f-line-2) !important; border-radius: 7px !important; box-shadow: none; transition: background-color .12s ease, border-color .12s ease; } /* The tick, drawn rather than loaded. */ .form-group .container-checkbox .checkmark::after, .container-checkbox .checkmark::after { content: ""; display: block !important; /* The theme draws its tick as an absolutely positioned rotated border. That positioning survived and put the mark in the middle of the paragraph instead of inside the box. */ position: static !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; border: 0 !important; transform: scale(.6); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px 14px !important; opacity: 0; transition: opacity .1s ease, transform .1s ease; } .container-checkbox input[type="checkbox"]:checked ~ .checkmark::after { transform: none !important; opacity: 1 !important; } .container-checkbox:hover .checkmark { border-color: var(--f-bold); } .form-group .container-checkbox input[type="checkbox"]:checked ~ .checkmark, .container-checkbox input[type="checkbox"]:checked ~ .checkmark { background: var(--f-blue) !important; border-color: var(--f-blue) !important; } /* Once the panel is marked done the box goes green with it. Written after - and at the same weight as - the rule above, which would otherwise win on specificity and leave a blue tick in a green panel. */ .form-group .container-checkbox.is-checked input[type="checkbox"]:checked ~ .checkmark, .container-checkbox.is-checked input[type="checkbox"]:checked ~ .checkmark { background: var(--f-green) !important; border-color: var(--f-green) !important; } .container-checkbox input[type="checkbox"]:checked ~ .checkmark::after { opacity: 1; transform: none; } .container-checkbox input[type="checkbox"]:focus-visible ~ .checkmark { outline: 3px solid rgba(0,104,210,.45); outline-offset: 3px; } /* Ticked acknowledgments recede, so what is left to do stands out. */ .form-group .container-checkbox.is-checked, .container-checkbox.is-checked { border-color: #b9cf95; background: #f6faef; } .form-group .container-checkbox.is-invalid, .container-checkbox.is-invalid { border-color: var(--f-red); background: #fdf4f3; } .form-group .container-checkbox.is-invalid .checkmark, .container-checkbox.is-invalid .checkmark { border-color: var(--f-red) !important; } /* Radios in a .container-checkbox keep the native control - there is no sprite span for them to borrow. */ .container-checkbox input[type="radio"] { position: static; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; opacity: 1; clip: auto; appearance: auto; -webkit-appearance: radio; accent-color: var(--f-blue); cursor: pointer; } /* The heading above each block. */ .crs-consent-heading { display: block; margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--f-blue); } .crs-consent-heading strong { font-weight: 700; } /* ========================================================================== 7. File upload ========================================================================== It was a blue block butted against the left edge of a bordered strip with the file name floating beside it - the button read as the field, and the field read as nothing. It is a drop target now: a document mark and an instruction on the left, the button on the right, the whole surface clickable, and a real drag-and-drop target. ========================================================================== */ .file-upload { margin: 0; } .file-upload .file-select, .file-select { position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 84px; padding: 16px 16px 16px 18px; background: var(--f-bg); border: 1.5px dashed var(--f-line-2); border-radius: var(--f-r); cursor: pointer; transition: border-color .12s ease, background-color .12s ease; } .file-select:hover { border-color: var(--f-bold); background: #f2f7fd; } /* The document mark. A pseudo-element, so no markup changes and nothing for the existing jQuery handlers to trip over. */ .file-upload .file-select::before { content: ""; order: 0; flex: none; width: 38px; height: 38px; border-radius: 9px; background: #e6edf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300468b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M13 3v6h6'/%3E%3C/svg%3E") no-repeat center / 20px 20px; } .file-upload .file-select .file-select-name, .file-select-name { order: 1; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; line-height: 1.4; color: var(--f-ink-3); } /* What the control accepts, stated on the control itself. */ .file-upload .file-select .file-select-name::after { content: "PDF, up to 10 MB"; display: block; margin-top: 3px; font-size: .75rem; color: var(--f-ink-3); } /* Literal characters, not escapes: "\2014\A0choose" parses as the six-digit hex escape \A0C, which ate the C and printed a replacement glyph. */ .file-select.has-file .file-select-name::after { content: "Attached — choose another to replace it"; } .file-select.is-invalid .file-select-name::after { content: "This file cannot be used"; } /* The button's colour has to be stated - the theme's own rule washed it out to near-white on near-white. Measured: #fff on CRS Blue is 9.34:1. */ .file-upload .file-select .file-select-button, .file-select-button { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; padding: 0 20px; font-size: .875rem; font-weight: 700; color: #ffffff; background: var(--f-blue); background-image: none; border: 0; border-radius: 8px; white-space: nowrap; text-shadow: none; opacity: 1; } .file-select:hover .file-select-button { background: #013a74; color: #fff; } .file-select input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; } /* The hidden input is what receives focus, so the ring goes on the shell. */ .file-upload:focus-within .file-select { border-style: solid; border-color: var(--f-bold); box-shadow: 0 0 0 3px rgba(0,104,210,.18); } /* A chosen file reads as done; a rejected one as an error. Both set by js/crs-form-ux.js, which checks type and size before the upload is tried. */ .file-select.has-file { border-style: solid; border-color: #a9c37a; background: #f6faef; } .file-select.has-file .file-select-name { color: var(--f-ink); font-weight: 600; } .file-upload .file-select.has-file::before { background: #e6f0d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235e7f24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 20px 20px; } .file-select.is-invalid { border-style: solid; border-color: var(--f-red); background: #fdf4f3; } .file-upload .file-select.is-invalid::before { background: #fbe0de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23da291c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2h.01'/%3E%3C/svg%3E") no-repeat center / 20px 20px; } /* Dragging a file over the control. */ .file-select.is-dragging { border-style: solid; border-color: var(--f-bold); background: #e8f1fc; } /* ========================================================================== 8. Buttons ========================================================================== */ .btn, .btn-primary, a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--f-tap); padding: 0 26px; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; border-radius: var(--f-r); border: 1px solid transparent; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .btn-primary, .btn.btn-primary { color: #fff; background: var(--f-blue); border-color: var(--f-blue); } .btn-primary:hover, .btn.btn-primary:hover { color: #fff; background: #013a74; border-color: #013a74; text-decoration: none; } .btn:focus-visible { outline: 3px solid rgba(0,104,210,.45); outline-offset: 2px; } .btn.py-2 { padding-top: 0; padding-bottom: 0; } .btn-primary, .btn.btn-primary { margin-top: 8px; float: none; clear: both; } /* The submit button carries the weight of the whole form. */ #crs_exp_13 .btn-primary { width: 100%; min-height: 54px; font-size: 1.0625rem; } /* ========================================================================== 9. Section headings inside the details tab ========================================================================== */ .job-summary-text, .fw-700 { font-weight: 700; color: var(--f-ink); } .job-summary-icon, .icon-circle-check { color: var(--f-green); margin-right: 8px; } /* ========================================================================== 11. Combobox — the searchable dropdown ========================================================================== Built by js/crs-form-ux.js, replacing select2 (which lives under /vendor/ and is not served on this host, so it never ran). The native