/* Horizon form look: fields, choice cards, submit button and dropdowns for the lead forms (.emo-form) and the faculty finder (.emo-finder). Loaded on every page from BaseLayout after /theme/horizon.css (not pruned: purge-css only touches theme/build/*). Uses the Horizon tokens. The dropdown library CSS (/js/vendor/tom-select.css) is added by /js/ui-select.js only on pages that have a dropdown, AFTER this file, so the dropdown rules below use extra classes (.ts-wrapper.emo-ts, .ts-dropdown.emo-dd) to win. Open lists may sit on , so they never depend on .emo-form. Logical properties keep RTL right. */ .emo-form,.emo-finder{--ui-primary:var(--color-brand,#006baf);--ui-ring:rgba(30,139,224,.22);--ui-text:var(--color-text,#0a1a2f);--ui-border:var(--color-border-strong,#c9d2de);--ui-border-hover:#5b6b80;--ui-error:var(--color-danger,#c2253a);--ui-radius:var(--radius-control,14px);--ui-h:3.25rem;--ui-tint:var(--color-brand-subtle,#e8f2fb)} .emo-form{--emo-primary:var(--color-brand,#006baf);--emo-text:var(--color-text,#0a1a2f);--emo-error:var(--color-danger,#c2253a);font-family:var(--font-sans,inherit)} /* ---------- Text fields ---------- */ .emo-form input[type=text],.emo-form input[type=email],.emo-form input[type=tel],.emo-form input[type=date],.emo-form textarea,.emo-form select:not(.tomselected){width:100%;box-sizing:border-box;font:inherit;font-weight:400;line-height:1.4;color:var(--ui-text);background-color:#fff;border:1.5px solid var(--ui-border);border-radius:var(--ui-radius);padding:.7rem 1rem;min-height:var(--ui-h);transition:border-color .15s,box-shadow .15s} /* iPhone/iPad Safari: the native date box keeps its own width and height and spills past the form edge. iOS only (other browsers keep their calendar icon). */ @supports (-webkit-touch-callout:none){.emo-form input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-inline-size:0;max-inline-size:100%;block-size:var(--ui-h);text-align:start}.emo-form input[type=date]::-webkit-date-and-time-value{text-align:start;min-block-size:1.4em}} .emo-form textarea{min-height:7.5rem;resize:vertical} .emo-form input::placeholder,.emo-form textarea::placeholder{color:#5b6b80;opacity:1;font-weight:300} .emo-form input:hover:not(:focus):not([readonly]),.emo-form textarea:hover:not(:focus),.emo-form select:not(.tomselected):hover:not(:focus){border-color:var(--ui-border-hover)} .emo-form input:focus,.emo-form textarea:focus,.emo-form select:focus{outline:0;border-color:var(--ui-primary);box-shadow:0 0 0 4px var(--ui-ring)} .emo-form input[readonly]{background:#f5f7fa;color:#3d4d63} .emo-form select[multiple]:not(.tomselected){min-height:9rem} /* Before the dropdown upgrade (JS on, library not failed) the multi-select looks like its one-line .ts-control: same box, placeholder, chevron. Nothing jumps on upgrade. It stays clickable; once a choice is made before the upgrade, the native list comes back so the choice is visible. */ @media(scripting:enabled){.emo-form:not([data-ts-failed]) .ginput_container_multiselect{position:relative} .emo-form:not([data-ts-failed]) select[multiple]:not(.tomselected):not(:has(option:checked)){display:block;appearance:none;block-size:var(--ui-h);min-height:0;overflow:hidden;color:transparent;padding-block:.35rem;padding-inline-end:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23112337' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-size:16px 12px;background-repeat:no-repeat;background-position:right .85rem center} .emo-form:not([data-ts-failed]) .ginput_container_multiselect:not(:has(.tomselected)):not(:has(option:checked))::before{content:attr(data-placeholder);position:absolute;z-index:1;inset-block-start:50%;inset-inline:calc(.85rem + 1.5px) 2.4rem;transform:translateY(-50%);color:#5b6b80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;line-height:1.4}} .emo-form select:not(.tomselected):not([multiple]){appearance:none;padding-inline-end:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23112337' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center} /* Empty choice: grey hint, like the upgraded box (the options themselves keep the normal text colour) */ .emo-form select:not(.tomselected):not([multiple]):has(>option[value=""]:checked){color:#5b6b80}.emo-form select:not(.tomselected):not([multiple]) option{color:var(--ui-text)} .emo-form .gfield_error input[type]:not([type=radio]):not([type=checkbox]),.emo-form .gfield_error textarea,.emo-form .gfield_error select:not(.tomselected),.emo-form .gfield_error .ts-control{border-color:var(--ui-error);background-color:var(--color-danger-subtle,#fdeef0)} .emo-form .gfield_error input:focus,.emo-form .gfield_error textarea:focus{box-shadow:0 0 0 4px rgba(194,37,58,.18)} .emo-form .gfield_validation_message{margin-top:.35rem} .emo-form .gfield_label,.emo-form legend{margin-bottom:.5rem;font-weight:500;font-size:.9375rem;color:var(--ui-text)} .emo-form .gform_fields{gap:1.5rem 1rem} /* Hidden inputs (tracking, apply-link details) still post; their wrappers must not take a grid row each, or the gaps add up to empty bands */ .emo-form .gform_hidden{display:none} /* A click anywhere in the field (label and padding included) opens or focuses it: /theme/shell.js. Show that it is clickable. */ .emo-form .gfield:not(.gfield--type-radio):not(.gfield--type-checkbox):not(.gfield--type-consent){cursor:pointer} .emo-form .gfield input,.emo-form .gfield textarea{cursor:text} /* ---------- Choice cards: radios are cards (Student / Parent, Father / Mother), the whole