/* ============================================================
JPIC — JOTFORM FULL-SOURCE BRAND OVERRIDE
------------------------------------------------------------
Maps Jotform's default-theme classes onto the JPIC design
system (tokens live in css/jpic-shared.css). Loaded on every
page that embeds a Jotform "full source" export inside a
.cu-jf wrapper:
About-JPIC/contact-us.html (enquiry, inline)
forms/enquiry-form.html (enquiry, popup)
forms/newsletter-form.html (newsletter signup)
Accommodation/homestay-provider.html (host interest)
WHY SCOPED UNDER .cu-jf:
Jotform injects its own theme s in the page BODY (after
this file's ). Scoping every rule under .cu-jf
adds a class level so these rules beat Jotform's on specificity
regardless of source order, and guarantees the overrides never
leak onto the rest of the site chrome. !important is used only
on the handful of properties Jotform sets aggressively.
RE-EXPORT NOTE: the embedded source pins a Jotform CDN build
hash. If the form is rebuilt in Jotform and the class structure
changes, re-export the source and re-check these selectors.
============================================================ */
/* ---------- shell ---------- */
.cu-jf .form-all {
font-family: var(--km-body) !important;
width: 100% !important; max-width: 100% !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important;
color: var(--grey-900);
border: none !important; box-shadow: none !important;
font-size: 15px;
}
.cu-jf form,
.cu-jf .form-section {
padding: 0 !important; margin: 0 !important; border: none !important;
background: transparent !important;
}
/* Hide Jotform's own cover logo + duplicate "Contact Us" heading —
the page hero and our own .cu-form-title already carry the title. */
.cu-jf #formCoverLogo,
.cu-jf .form-cover-wrapper,
.cu-jf #cid_1,
.cu-jf .form-header-group { display: none !important; }
/* ---------- field rows ---------- */
.cu-jf .form-line {
padding: 0 !important; margin: 0 0 16px !important;
background: transparent !important;
}
.cu-jf .form-line:hover { background: transparent !important; }
/* Both container variants fill their column. Jotform gives some fields the
narrower "form-input" class (e.g. the Name field) rather than
"form-input-wide" — normalise them so inputs span the whole column. */
.cu-jf .form-input,
.cu-jf .form-input-wide { width: 100% !important; max-width: 100% !important; }
/* Two-column rows (e.g. Email + Phone side by side). Flex on the field
list so the .form-line-column pair shares one row; every other row stays
full width. Stacks back to one column on narrow screens. */
.cu-jf .form-section { display: flex; flex-wrap: wrap; column-gap: 16px; }
.cu-jf .form-section > .form-line { flex: 0 0 100%; }
.cu-jf .form-section > .form-line-column { flex: 0 0 calc(50% - 8px); }
@media (max-width: 560px) {
.cu-jf .form-section > .form-line-column { flex: 0 0 100%; }
}
/* ---------- labels ---------- */
/* Force every label to sit on top, left-aligned, full width — overrides
Jotform's default right-/left-floated "auto" labels (e.g. the Name field
ships as form-label-right, which otherwise shunts it out of column). */
.cu-jf .form-label,
.cu-jf .form-label-top,
.cu-jf .form-label-left,
.cu-jf .form-label-right,
.cu-jf .form-label-auto {
display: block !important; float: none !important;
text-align: left !important; width: 100% !important;
font-family: var(--km-display) !important; font-weight: 700 !important;
font-size: 12.5px !important; color: var(--grey-700) !important;
margin: 0 0 6px !important; line-height: 1.4 !important; letter-spacing: .2px;
}
/* Full name (First + Last) — keep it a single full-width column with the two
inputs side by side, filling the row like the other fields. */
/* !important throughout: Jotform's own theme sets these containers to
flex:1 1 48% with a stray margin-left on the second one, which left the
Last Name field 8px narrower than First Name — a visibly ragged edge. */
.cu-jf [data-type="control_fullname"] [role="group"] { display: flex !important; gap: 16px; }
.cu-jf [data-type="control_fullname"] .form-sub-label-container {
flex: 1 1 0 !important; display: block; min-width: 0; margin: 0 !important;
}
@media (max-width: 560px) {
.cu-jf [data-type="control_fullname"] [role="group"] { flex-wrap: wrap; }
.cu-jf [data-type="control_fullname"] .form-sub-label-container { flex: 1 1 100% !important; }
}
.cu-jf .form-sub-label {
font-family: var(--km-body) !important; color: var(--grey-500) !important;
font-size: 11.5px !important; margin-top: 5px !important; font-weight: 400 !important;
}
.cu-jf .form-required { color: var(--jpic-red) !important; margin-left: 2px; }
/* Links inside a field label (e.g. the Privacy Policy link on the consent row) */
.cu-jf .form-label a {
color: var(--jpic-blue) !important; font-weight: 700;
text-decoration: none; border-bottom: 1px solid var(--jpic-gold);
}
.cu-jf .form-label a:hover { color: var(--jpic-red) !important; }
/* ---------- text / email / tel / textarea / dropdown ---------- */
.cu-jf .form-textbox,
.cu-jf .form-textarea,
.cu-jf .form-dropdown {
width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
border: 1.5px solid var(--grey-200) !important; border-radius: 11px !important;
padding: 12px 14px !important; min-height: 46px !important;
font-family: var(--km-body) !important; font-size: 14.5px !important;
color: var(--grey-900) !important; background: #f6f8fb !important;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.cu-jf .form-textarea { min-height: 120px !important; resize: vertical !important; }
.cu-jf .form-textbox:hover,
.cu-jf .form-textarea:hover,
.cu-jf .form-dropdown:hover { border-color: #c3d2e4 !important; }
.cu-jf .form-textbox:focus,
.cu-jf .form-textarea:focus,
.cu-jf .form-dropdown:focus {
outline: none !important; background: #fff !important;
border-color: var(--jpic-blue-light) !important;
box-shadow: 0 0 0 3px rgba(0,73,144,.14) !important;
}
.cu-jf .phone-separate { color: var(--grey-500); }
/* ---------- HTML text block (e.g. a Privacy-Policy consent line sitting
above a plain consent checkbox — control_text / .form-html) ---------- */
.cu-jf .form-html {
font-family: var(--km-body) !important;
font-size: 13px !important; color: var(--grey-600) !important; line-height: 1.55 !important;
}
.cu-jf .form-html p { margin: 0 !important; }
.cu-jf .form-html a {
color: var(--jpic-blue) !important; font-weight: 700;
text-decoration: none; border-bottom: 1px solid var(--jpic-gold);
}
.cu-jf .form-html a:hover { color: var(--jpic-red) !important; }
/* ---------- checkbox (consent) ---------- */
.cu-jf .form-checkbox-item { display: flex !important; align-items: flex-start; gap: 10px; }
.cu-jf input[type="checkbox"].form-checkbox {
width: 19px !important; height: 19px !important; margin: 2px 0 0 !important;
flex-shrink: 0; accent-color: var(--jpic-blue); cursor: pointer;
}
.cu-jf .form-checkbox-item label {
font-family: var(--km-body) !important; font-weight: 400 !important;
font-size: 13.5px !important; color: var(--grey-700) !important; line-height: 1.5 !important;
}
/* ---------- radio (e.g. a Yes/No consent answer) ---------- */
.cu-jf .form-radio-item { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 0 8px !important; }
.cu-jf .form-radio-item:last-child { margin-bottom: 0 !important; }
.cu-jf input[type="radio"].form-radio {
width: 19px !important; height: 19px !important; margin: 1px 0 0 !important;
flex-shrink: 0; accent-color: var(--jpic-blue); cursor: pointer;
}
.cu-jf .form-radio-item label {
font-family: var(--km-body) !important; font-weight: 400 !important;
font-size: 13.5px !important; color: var(--grey-700) !important;
line-height: 1.5 !important; cursor: pointer;
}
/* Jotform ships an empty drag handle in every choice row (builder artefact). */
.cu-jf .dragger-item { display: none !important; }
/* ---------- fields the form marks as permanently hidden ----------
(e.g. a lead/signup source field filled from the URL). Jotform's own CSS
hides these, but it loads in the body — restate it so the flex row above
can never reveal one. */
.cu-jf .form-line.always-hidden,
.cu-jf .form-input.always-hidden { display: none !important; }
/* ---------- submit (brand red pill) ---------- */
.cu-jf .form-buttons-wrapper { margin: 0 !important; padding: 0 !important; text-align: left !important; }
.cu-jf .form-submit-button,
.cu-jf .submit-button {
width: 100% !important; justify-content: center !important;
font-family: var(--km-display) !important; font-weight: 700 !important; font-size: 15.5px !important;
padding: 15px 24px !important; border: none !important; border-radius: 999px !important;
background: var(--jpic-red) !important; color: #fff !important; cursor: pointer;
box-shadow: 0 10px 24px rgba(237,27,46,.26) !important;
transition: filter .2s, transform .2s, box-shadow .2s; margin-top: 6px !important;
}
.cu-jf .form-submit-button:hover,
.cu-jf .submit-button:hover {
filter: brightness(1.06); transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(237,27,46,.32) !important;
}
/* ---------- validation errors ---------- */
.cu-jf .form-line-error .form-textbox,
.cu-jf .form-line-error .form-textarea,
.cu-jf .form-line-error .form-dropdown {
border-color: var(--jpic-red) !important;
box-shadow: 0 0 0 3px rgba(237,27,46,.12) !important;
}
.cu-jf .form-error-message {
background: transparent !important; color: var(--jpic-red) !important;
font-family: var(--km-body) !important; font-size: 12px !important; font-weight: 600 !important;
padding: 5px 0 0 !important;
}
.cu-jf .form-error-message .form-error-arrow { display: none !important; }
/* ---------- language dropdown (keep; light brand touch) ---------- */
.cu-jf .language-dd { border-radius: 10px !important; border-color: var(--grey-200) !important; }
/* ---------- country picker widget iframe ---------- */
.cu-jf .custom-field-frame { max-width: 100% !important; width: 100% !important; }
/* ---------- hCaptcha spacing ---------- */
.cu-jf [data-type="control_captcha"] { margin-top: 4px; }
/* ============================================================
ADDITIONS FOR THE ALUMNI STORY FORM (262247171634052)
------------------------------------------------------------
That form introduced four component types the enquiry and
homestay forms never used, so nothing above covered them:
· radio groups (the whole Permission section)
· the v2 file uploader (.jfUpload-*)
· page breaks + Next/Back (it is a 5-page form)
·
section headings inside .form-html text elements
All still scoped under .cu-jf, and all target classes the
other two forms don't emit, so those pages are unaffected.
============================================================ */
/* ---------- two-column pairing, second variant ----------
The enquiry/homestay forms mark half-width rows with .form-line-column on
the
(handled further up). This form instead puts data-layout="half"
on the inner .form-input div, so the
has no class to match and every
field stacked full-width. Pair those rows too. Fields marked
data-layout="full" (textareas, uploads, radios) are untouched. */
.cu-jf .form-section > .form-line:has(> [data-layout="half"]) {
flex: 0 0 calc(50% - 8px);
}
@media (max-width: 560px) {
.cu-jf .form-section > .form-line:has(> [data-layout="half"]) { flex: 0 0 100%; }
}
/* Jotform hard-codes pixel widths inline (width:310px / 648px). The width
rules further up already override those with !important; this keeps the
inline `size` attribute from forcing a min-width in the flex row. */
.cu-jf .form-section > .form-line { min-width: 0; }
/* ---------- section headings (control_text with an