/* =========================================================
CTMS GLOBAL VARIABLES
========================================================= */
:root {
/* Testing value. Later this can be: var(--e-global-color-primary, #00ADEE); */
--site-primary-override: #00ADEE;
--site-font-family: "DM Sans", sans-serif;
--site-heading: #14284B;
--site-text: #1C3144;
--site-muted: #65758B;
--site-card-bg: #F3FAFD;
--site-card-border: #E3EEF3;
/* Form colours */
--form-bg: #F3F3F3;
--form-text: #374151;
--form-heading: #123B7A;
--form-border: #E2E8F0;
--form-placeholder: #A3AAB5;
/* Form field colours */
--form-field-bg: #FFFFFF;
--form-field-border: #D1D5DB;
--form-field-focus-border: #9CA3AF;
}
/* =========================================================
GLOBAL FONT
Defined once and applied to CTMS listing, study detail and form.
========================================================= */
.rt-embed.rt-container,
.rt-embed.rt-container *,
.rt-embed.rt-container *::before,
.rt-embed.rt-container *::after,
.study-page,
.study-page *,
.study-page *::before,
.study-page *::after,
.osBox.osBox-100.osDetail.osContent,
.osBox.osBox-100.osDetail.osContent *,
.osBox.osBox-100.osDetail.osContent *::before,
.osBox.osBox-100.osDetail.osContent *::after {
font-family: var(--site-font-family) !important;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.rt-embed.rt-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
color: var(--site-text) !important;
}
/* =========================================================
LINK COLOUR
========================================================= */
.osTitle .rt-home-button {
color: var(--site-primary-override);
}
/* =========================================================
SEARCH BAR
========================================================= */
.ctms-study-search {
display: flex !important;
align-items: center !important;
width: 100% !important;
gap: clamp(8px, 0.55vw, 12px) !important;
margin: 0 0 clamp(20px, 1.56vw, 30px) !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
SEARCH INPUT WRAPPER
========================================================= */
.ctms-search-input-wrapper {
position: relative !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
SEARCH ICON
========================================================= */
.ctms-search-input-wrapper::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: clamp(14px, 0.9vw, 18px) !important;
width: 15px !important;
height: 15px !important;
transform: translateY(-50%) !important;
background: #8B99A8 !important;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M10.5 10.5L14 14' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M10.5 10.5L14 14' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;
pointer-events: none !important;
z-index: 5 !important;
}
/* =========================================================
SEARCH INPUT
========================================================= */
.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input {
display: block !important;
width: 100% !important;
height: clamp(42px, 2.65vw, 52px) !important;
min-height: clamp(42px, 2.65vw, 52px) !important;
margin: 0 !important;
padding:
0 clamp(40px, 2.8vw, 50px)
0 clamp(38px, 2.6vw, 48px) !important;
box-sizing: border-box !important;
background: #FFFFFF !important;
border: 1px solid #E1E7EC !important;
border-radius: 999px !important;
color: var(--site-text) !important;
font-family: var(--site-font-family) !important;
font-size: clamp(11px, 0.68vw, 14px) !important;
font-weight: 400 !important;
line-height: 1 !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input::placeholder {
color: #98A5B3 !important;
opacity: 1 !important;
}
.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input:focus {
border-color: var(--site-primary-override) !important;
outline: none !important;
box-shadow:
0 0 0 2px
color-mix(
in srgb,
var(--site-primary-override) 12%,
transparent
) !important;
}
/* Hide browser's native search X */
.rt-embed.rt-container
.ctms-study-search
input.ctms-study-search-input::-webkit-search-cancel-button {
-webkit-appearance: none !important;
appearance: none !important;
}
/* =========================================================
CLEAR BUTTON
========================================================= */
.ctms-search-clear {
position: absolute !important;
top: 50% !important;
right: 14px !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
transform: translateY(-50%) !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #7A8795 !important;
font-family: Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 10 !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.ctms-search-clear:hover {
background: #F0F3F5 !important;
color: var(--site-text) !important;
}
/* =========================================================
SEARCH BUTTON
========================================================= */
.rt-embed.rt-container
.ctms-study-search
button.ctms-study-search-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 clamp(140px, 10.2vw, 196px) !important;
width: clamp(140px, 10.2vw, 196px) !important;
height: clamp(42px, 2.65vw, 52px) !important;
min-height: clamp(42px, 2.65vw, 52px) !important;
margin: 0 !important;
padding: 0 20px !important;
box-sizing: border-box !important;
border: 1px solid var(--site-primary-override) !important;
border-radius: 999px !important;
background-color: var(--site-primary-override) !important;
background: var(--site-primary-override) !important;
color: #FFFFFF !important;
font-family: var(--site-font-family) !important;
font-size: clamp(12px, 0.68vw, 14px) !important;
font-weight: 500 !important;
line-height: 1 !important;
text-align: center !important;
white-space: nowrap !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
transition:
opacity 0.2s ease,
transform 0.2s ease !important;
}
.rt-embed.rt-container
.ctms-study-search
button.ctms-study-search-button:hover {
background-color: var(--site-primary-override) !important;
background: var(--site-primary-override) !important;
border-color: var(--site-primary-override) !important;
color: #FFFFFF !important;
opacity: 0.88 !important;
}
/* =========================================================
MAIN HEADER
========================================================= */
.rt-embed .osHeader .osTitle {
margin:
0 0 clamp(18px, 1.25vw, 24px) !important;
padding: 0 !important;
color: var(--site-heading) !important;
font-size:
clamp(
22px,
calc(18.85px + 0.817vw),
34px
) !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* =========================================================
STUDY AREA HEADING
========================================================= */
.rt-embed h2.osArea {
margin:
0 0 clamp(12px, 0.83vw, 16px) !important;
padding: 0 !important;
color: var(--site-heading) !important;
font-size:
clamp(
22px,
calc(18.85px + 0.817vw),
34px
) !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* =========================================================
KEYWORD PILLS
========================================================= */
.rt-embed .rt-keyword-container {
display: inline-block !important;
width: auto !important;
max-width: 100% !important;
float: none !important;
margin:
0 6px 8px 0 !important;
padding: 0 !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
.rt-embed .rt-keyword-container p.osStudyItem,
.rt-embed .rt-keyword-container p.keyword-indiv-elem {
display: inline-block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.rt-embed .rt-keyword {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height:
clamp(28px, 1.46vw, 32px) !important;
padding:
5px clamp(12px, 0.68vw, 14px) !important;
box-sizing: border-box !important;
border:
1px solid
color-mix(
in srgb,
var(--site-primary-override) 40%,
white
) !important;
border-radius: 999px !important;
background:
color-mix(
in srgb,
var(--site-primary-override) 8%,
white
) !important;
color: var(--site-text) !important;
font-family: var(--site-font-family) !important;
font-size:
clamp(
9px,
calc(8px + 0.16vw),
12px
) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
text-decoration: none !important;
cursor: pointer !important;
}
.rt-embed .rt-keyword:hover {
background: var(--site-primary-override) !important;
border-color: var(--site-primary-override) !important;
color: #FFFFFF !important;
}
/* =========================================================
STUDY CARD
========================================================= */
.rt-embed .osListing {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 84px !important;
margin:
0 0 clamp(8px, 0.63vw, 12px) !important;
padding:
clamp(14px, 0.83vw, 16px)
clamp(120px, 9vw, 150px)
clamp(14px, 0.83vw, 16px)
clamp(16px, 1.25vw, 24px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: var(--site-card-bg) !important;
border:
1px solid var(--site-card-border) !important;
border-radius:
clamp(9px, 0.63vw, 12px) !important;
}
/* =========================================================
HIDE CTMS THUMBNAIL
========================================================= */
.rt-embed .osListing .osThumb {
display: none !important;
}
/* =========================================================
STUDY DETAILS
========================================================= */
.rt-embed .osListing .osDetail {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
STUDY TITLE
========================================================= */
.rt-embed .osListing .osDetail > h2 {
margin:
0 0 4px !important;
padding: 0 !important;
color: var(--site-text) !important;
font-family: var(--site-font-family) !important;
font-size:
clamp(
16px,
calc(15px + 0.18vw),
18.407px
) !important;
font-style: normal !important;
font-weight: 600 !important;
line-height:
clamp(
24px,
calc(22px + 0.4vw),
27.61px
) !important;
letter-spacing: -0.46px !important;
}
/* =========================================================
DESCRIPTION
========================================================= */
.rt-embed .osListing .osDetail p {
margin: 0 !important;
padding: 0 !important;
color: var(--site-text) !important;
font-family: var(--site-font-family) !important;
font-size:
clamp(
11px,
calc(10px + 0.16vw),
13px
) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* Override CTMS inline Verdana */
.rt-embed .osListing .osDetail p[style] {
font-family: var(--site-font-family) !important;
font-size:
clamp(
11px,
calc(10px + 0.16vw),
13px
) !important;
line-height: 1.4 !important;
}
.rt-embed .osListing .osDetail p > div {
margin: 0 !important;
padding: 0 !important;
font-family: var(--site-font-family) !important;
color: var(--site-text) !important;
font-size: inherit !important;
line-height: inherit !important;
}
.rt-embed .osListing .osDetail p > div p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--site-font-family) !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* =========================================================
CTA CONTAINER
========================================================= */
.rt-embed .osListing .rt-study-area-buttons {
position: absolute !important;
top: 50% !important;
right: clamp(12px, 0.83vw, 16px) !important;
display: flex !important;
align-items: center !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
}
/* =========================================================
CTA ARROW
========================================================= */
.rt-embed .osListing
.rt-study-area-buttons::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: 13px !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
background: var(--site-primary-override) !important;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat !important;
pointer-events: none !important;
}
/* =========================================================
CTA BUTTON
========================================================= */
.rt-embed .osListing
input.osButton.osButton-inline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width:
clamp(
118px,
7.7vw,
148px
) !important;
height:
clamp(
36px,
2.3vw,
44px
) !important;
min-height:
clamp(
36px,
2.3vw,
44px
) !important;
margin: 0 !important;
padding:
0 36px 0 16px !important;
box-sizing: border-box !important;
border:
0.92px solid
var(--site-primary-override) !important;
border-radius: 999px !important;
background: #FFFFFF !important;
color: var(--site-primary-override) !important;
font-family: var(--site-font-family) !important;
font-size:
clamp(
12px,
0.625vw,
13px
) !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
text-shadow: none !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.rt-embed .osListing
input.osButton.osButton-inline:hover {
background:
var(--site-primary-override) !important;
border-color:
var(--site-primary-override) !important;
color: #FFFFFF !important;
}
.rt-embed .osListing
.rt-study-area-buttons:hover::after {
background: #FFFFFF !important;
}
/* Remove CTMS inline margin */
.rt-embed .osListing
.rt-study-area-buttons input {
margin-right: 0 !important;
}
/* =========================================================
NO RESULTS
========================================================= */
.ctms-no-results {
display: none !important;
width: 100% !important;
margin:
0 0 16px !important;
padding:
24px 20px !important;
box-sizing: border-box !important;
background:
var(--site-card-bg) !important;
border:
1px solid var(--site-card-border) !important;
border-radius:
12px !important;
color:
var(--site-muted) !important;
font-family:
var(--site-font-family) !important;
font-size:
14px !important;
line-height:
1.5 !important;
text-align:
center !important;
}
.ctms-no-results.ctms-show {
display: block !important;
}
/* =========================================================
PAGINATION
========================================================= */
.ctms-pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: 100% !important;
margin:
clamp(20px, 1.56vw, 30px)
0 0 !important;
padding: 0 !important;
}
.ctms-pagination button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width:
clamp(30px, 2vw, 38px) !important;
height:
clamp(30px, 2vw, 38px) !important;
min-width:
clamp(30px, 2vw, 38px) !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
border:
1px solid var(--site-card-border) !important;
border-radius: 999px !important;
background: #FFFFFF !important;
color: var(--site-text) !important;
font-family:
var(--site-font-family) !important;
font-size:
clamp(
10px,
0.625vw,
13px
) !important;
font-weight: 500 !important;
line-height: 1 !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: none !important;
}
.ctms-pagination button:hover {
border-color:
var(--site-primary-override) !important;
color:
var(--site-primary-override) !important;
}
.ctms-pagination
button.ctms-page-active {
background:
var(--site-primary-override) !important;
border-color:
var(--site-primary-override) !important;
color:
#FFFFFF !important;
}
.ctms-pagination
button.ctms-page-arrow {
font-size: 16px !important;
}
.ctms-pagination
button:disabled {
opacity: 0.35 !important;
cursor: default !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.ctms-study-search {
gap: 8px !important;
}
.ctms-study-search-button {
flex: 0 0 105px !important;
width: 105px !important;
}
.ctms-study-search-input {
height: 42px !important;
min-height: 42px !important;
}
.rt-embed .osHeader .osTitle,
.rt-embed h2.osArea {
font-size:
clamp(
22px,
5.8vw,
30px
) !important;
}
.rt-embed .rt-keyword-container {
margin:
0 5px 7px 0 !important;
}
.rt-embed .osListing {
min-height: 88px !important;
padding:
12px
104px
12px
12px !important;
}
.rt-embed .osListing
.osDetail > h2 {
font-size: 15px !important;
line-height: 1.35 !important;
}
.rt-embed .osListing
.osDetail p {
font-size: 11px !important;
}
.rt-embed .osListing
.rt-study-area-buttons {
right: 9px !important;
}
.rt-embed .osListing
input.osButton.osButton-inline {
min-width: 94px !important;
height: 34px !important;
min-height: 34px !important;
padding:
0 30px 0 10px !important;
font-size: 11px !important;
}
.rt-embed .osListing
.rt-study-area-buttons::after {
right: 10px !important;
width: 13px !important;
height: 13px !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.ctms-study-search-button {
flex:
0 0 90px !important;
width:
90px !important;
padding:
0 10px !important;
}
.ctms-study-search-input {
padding-left: 38px !important;
padding-right: 38px !important;
}
.rt-embed .osListing {
min-height: 86px !important;
padding:
12px
96px
12px
12px !important;
}
.rt-embed .osListing
input.osButton.osButton-inline {
min-width: 88px !important;
height: 33px !important;
min-height: 33px !important;
padding:
0 28px 0 9px !important;
font-size: 10px !important;
}
}
/* =========================================================
STUDY DETAIL — RESEARCH STUDIES TITLE
========================================================= */
/* =========================================================
RESEARCH STUDIES TITLE
18px → 24px using clamp
========================================================= */
.osTitle,
.osTitle *,
.osTitle *::before,
.osTitle *::after {
font-family: var(--site-font-family) !important;
}
.osTitle {
font-size:
clamp(
18px,
calc(16.54px + 0.388vw),
24px
) !important;
font-weight:
600 !important;
line-height:
1.2 !important;
}
/* =========================================================
CTMS
========================================================= */
.study-page {
--site-primary:
var(--site-primary-override) !important;
}
/* =========================================================
SECTION TITLES
=========================================================
Study Overview
WHO CAN PARTICIPATE
JOURNEY
BENEFITS
FAQ
Existing CTMS content is NOT changed.
Only styling is applied.
========================================================= */
.study-page .section-label {
color:
var(--site-primary-override) !important;
}
/* =========================================================
PILLS
========================================================= */
.study-page .study-tag {
color:
var(--site-primary-override) !important;
border-color:
var(--site-primary-override) !important;
background:
var(--form-bg) !important;
}
/* =========================================================
PARTICIPATION BULLETS
========================================================= */
.study-page
.participation-list li::before {
background:
var(--site-primary-override) !important;
}
/* =========================================================
JOURNEY / FLOW
========================================================= */
/* Number colour only.
Circle background remains unchanged. */
.study-page .journey-number {
color:
var(--site-primary-override) !important;
}
/* Flow title */
.study-page .journey-title {
color:
var(--site-primary-override) !important;
}
/* Dashed connecting line */
.study-page .journey-line {
border-top-color:
var(--site-primary-override) !important;
}
/* =========================================================
BENEFITS
========================================================= */
.study-page .benefit-title {
color:
var(--site-primary-override) !important;
}
/* Benefit underline, if present */
.study-page .benefit-title::after {
background:
var(--site-primary-override) !important;
}
/* =========================================================
APPLICATION FORM
========================================================= */
/* =========================================================
FORM VARIABLES + CONTAINER
========================================================= */
.osBox.osBox-100.osDetail.osContent {
/* Form width */
width:
100% !important;
max-width:
100% !important;
margin:
0 auto !important;
/* Responsive padding */
padding:
clamp(
24px,
calc(16px + 0.83vw),
32px
)
clamp(
16px,
calc(12px + 0.42vw),
20px
) !important;
/* Requested form background */
background:
var(--form-bg) !important;
border:
1px solid var(--form-border) !important;
border-radius:
clamp(
18px,
1.15vw,
22px
) !important;
box-sizing:
border-box !important;
color:
var(--form-text) !important;
}
/* =========================================================
FORM BOX SIZING
========================================================= */
.osBox.osBox-100.osDetail.osContent *,
.osBox.osBox-100.osDetail.osContent *::before,
.osBox.osBox-100.osDetail.osContent *::after {
box-sizing:
border-box;
}
/* =========================================================
FORM HEADING
=========================================================
Existing CTMS heading/content remains unchanged.
Only styling is applied.
========================================================= */
.osBox.osBox-100.osDetail.osContent
> h1 {
margin:
0 0 clamp(
16px,
1.25vw,
24px
) !important;
padding:
0 !important;
color:
var(--form-heading) !important;
font-size:
clamp(
28px,
2.5vw,
42px
) !important;
font-weight:
600 !important;
line-height:
1.2 !important;
text-align:
center !important;
}
/* =========================================================
FORM PARAGRAPH
========================================================= */
.osBox.osBox-100.osDetail.osContent
p {
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
font-weight:
400 !important;
line-height:
1.5 !important;
color:
var(--form-text) !important;
}
/* =========================================================
FIELD WRAPPERS
========================================================= */
.osBox.osBox-100.osDetail.osContent
> div[style*="margin: 3px"] {
margin:
0 0 18px !important;
padding:
0 !important;
border:
0 !important;
}
/* =========================================================
FORM LABELS
========================================================= */
.osBox.osBox-100.osDetail.osContent
.osFormLabel.singlePageBlockElem {
margin:
0 0 7px !important;
padding:
0 !important;
color:
var(--form-text) !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
font-weight:
400 !important;
line-height:
1.3 !important;
}
/* =========================================================
FORM VALUE
========================================================= */
.osBox.osBox-100.osDetail.osContent
.osFormValue.singlePageBlockElem {
width:
100% !important;
margin:
0 !important;
padding:
0 !important;
}
/* =========================================================
TEXT INPUTS
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="text"],
.osBox.osBox-100.osDetail.osContent
input[type="email"],
.osBox.osBox-100.osDetail.osContent
input[type="tel"],
.osBox.osBox-100.osDetail.osContent
input[type="number"] {
width:
100% !important;
height:
clamp(
50px,
calc(46px + 0.42vw),
54px
) !important;
margin:
0 !important;
padding:
14px 16px !important;
color:
var(--form-text) !important;
background:
var(--form-field-bg) !important;
border:
1px solid var(--form-border) !important;
border-radius:
8px !important;
outline:
none !important;
font-size:
clamp(
14px,
calc(12px + 0.21vw),
16px
) !important;
font-weight:
400 !important;
line-height:
1.5 !important;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.osBox.osBox-100.osDetail.osContent
input::placeholder {
color:
var(--form-placeholder) !important;
opacity:
1 !important;
}
/* =========================================================
FORM FIELDS — STANDARD COLOUR
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="text"],
.osBox.osBox-100.osDetail.osContent
input[type="email"],
.osBox.osBox-100.osDetail.osContent
input[type="tel"],
.osBox.osBox-100.osDetail.osContent
input[type="number"],
.osBox.osBox-100.osDetail.osContent
select,
.osBox.osBox-100.osDetail.osContent
textarea {
border:
1px solid var(--form-field-border) !important;
background:
var(--form-field-bg) !important;
outline:
none !important;
}
/* =========================================================
FORM FIELDS — FOCUS
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="text"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="email"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="tel"]:focus,
.osBox.osBox-100.osDetail.osContent
input[type="number"]:focus,
.osBox.osBox-100.osDetail.osContent
select:focus,
.osBox.osBox-100.osDetail.osContent
textarea:focus {
border-color:
var(--form-field-focus-border) !important;
outline:
none !important;
box-shadow:
none !important;
}
/* =========================================================
FORM FIELDS — ERROR / INVALID
========================================================= */
.osBox.osBox-100.osDetail.osContent
input:invalid,
.osBox.osBox-100.osDetail.osContent
input.error,
.osBox.osBox-100.osDetail.osContent
input.invalid,
.osBox.osBox-100.osDetail.osContent
select.error,
.osBox.osBox-100.osDetail.osContent
select.invalid,
.osBox.osBox-100.osDetail.osContent
textarea.error,
.osBox.osBox-100.osDetail.osContent
textarea.invalid {
border-color:
var(--form-field-border) !important;
box-shadow:
none !important;
outline:
none !important;
}
/* =========================================================
FIRST NAME / LAST NAME
========================================================= */
.osBox.osBox-100.osDetail.osContent
> div:has(input[name="FirstName"]) {
display:
inline-block !important;
width: 100%;
margin-right:
8px !important;
vertical-align:
top !important;
}
.osBox.osBox-100.osDetail.osContent
> div:has(input[name="LastName"]) {
display:
inline-block !important;
width: 100%;
vertical-align:
top !important;
}
/* =========================================================
SELECT
========================================================= */
.osBox.osBox-100.osDetail.osContent
select {
width:
100% !important;
height:
clamp(
50px,
calc(46px + 0.42vw),
54px
) !important;
margin:
0 !important;
padding:
12px 16px !important;
color:
var(--form-text) !important;
background:
var(--form-field-bg) !important;
border:
1px solid var(--form-border) !important;
border-radius:
8px !important;
font-size:
clamp(
14px,
calc(12px + 0.21vw),
16px
) !important;
font-weight:
400 !important;
}
/* =========================================================
DATE OF BIRTH
========================================================= */
.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] {
width: 100%;
margin-bottom: 10px !important;
}
.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] + select {
width:100%;
margin-bottom: 10px !important;
}
.osBox.osBox-100.osDetail.osContent
select[data-field="dob_day"] + select + select {
width: 100%;
margin-bottom: 10px !important;
}
/* =========================================================
RADIO
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="radio"] {
width:
16px !important;
height:
16px !important;
margin:
0 7px 0 0 !important;
accent-color:
var(--site-primary-override) !important;
vertical-align:
middle !important;
}
/* =========================================================
RADIO LABEL
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="radio"] + label {
color:
var(--form-text) !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
}
/* =========================================================
CHECKBOX
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="checkbox"] {
width:
16px !important;
height:
16px !important;
margin:
0 8px 0 0 !important;
accent-color:
var(--site-primary-override) !important;
vertical-align:
middle !important;
}
/* =========================================================
CHECKBOX LABEL
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[type="checkbox"] + label {
color:
var(--form-text) !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
}
/* =========================================================
SEARCH INPUT
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[data-field^="search_"] {
width:
100% !important;
height:
44px !important;
margin:
0 0 10px !important;
padding:
10px 14px !important;
color:
var(--form-text) !important;
background:
var(--form-field-bg) !important;
border:
1px solid var(--form-border) !important;
border-radius:
8px !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
15px
) !important;
}
/* =========================================================
CHECKBOX LIST
========================================================= */
.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] {
width:
100% !important;
height:
256px !important;
padding:
0 !important;
}
/* =========================================================
CHECKBOX LIST ROWS
========================================================= */
.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] p {
margin:
0 0 12px !important;
padding:
0 !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
line-height:
1.5 !important;
}
/* =========================================================
CHECKBOX LIST TEXT
========================================================= */
.osBox.osBox-100.osDetail.osContent
.osFormValue > div[style*="height: 256px"] label {
color:
var(--form-text) !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
font-weight:
400 !important;
line-height:
1.5 !important;
}
/* =========================================================
CONTACT TIME CHECKBOX
========================================================= */
.osBox.osBox-100.osDetail.osContent
input[name="_ContactTime[]"] {
margin-right:
8px !important;
accent-color:
var(--site-primary-override) !important;
}
/* =========================================================
CONFIDENTIAL MESSAGE
========================================================= */
.osBox.osBox-100.osDetail.osContent
.webint-notice-confidential {
margin:
20px 0 !important;
padding:
0 !important;
color:
#505665 !important;
font-size:
clamp(
13px,
calc(11px + 0.26vw),
16px
) !important;
line-height:
1.5 !important;
}
/* =========================================================
SUBMIT BUTTON
=========================================================
DESIGN ONLY.
The existing value="Submit Application"
remains untouched.
========================================================= */
.osBox.osBox-100.osDetail.osContent
.rt-application-button-container {
width:
100% !important;
margin:
28px 0 0 !important;
padding:
0 !important;
text-align:
center !important;
}
.osBox.osBox-100.osDetail.osContent
input.osButton {
width:
50% !important;
height: clamp( 32px, 8vw + 10px, 70px ) !important;
min-height:
0 !important;
margin:
0 !important;
padding:
0 30px !important;
background:
var(--site-primary-override) !important;
color:
#FFFFFF !important;
border:
none !important;
border-radius:
999px !important;
/* 12px minimum → 18px maximum */
font-size:
clamp(
12px,
1.55vw,
18px
) !important;
font-weight:
400 !important;
line-height:
1 !important;
text-align:
center !important;
box-shadow:
none !important;
cursor:
pointer !important;
}
/* =========================================================
SUBMIT BUTTON HOVER
========================================================= */
.osBox.osBox-100.osDetail.osContent
input.osButton:hover {
background:
var(--site-primary-override) !important;
color:
#FFFFFF !important;
border:
none !important;
box-shadow:
none !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.osBox.osBox-100.osDetail.osContent {
padding:
24px 16px !important;
border-radius:
18px !important;
}
/* First / Last name become full width */
.osBox.osBox-100.osDetail.osContent
> div:has(input[name="FirstName"]),
.osBox.osBox-100.osDetail.osContent
> div:has(input[name="LastName"]) {
display:
block !important;
width:
100% !important;
margin-left:
0 !important;
margin-right:
0 !important;
}
/* Inputs */
.osBox.osBox-100.osDetail.osContent
input[type="text"],
.osBox.osBox-100.osDetail.osContent
input[type="email"],
.osBox.osBox-100.osDetail.osContent
input[type="tel"],
.osBox.osBox-100.osDetail.osContent
input[type="number"],
.osBox.osBox-100.osDetail.osContent
select {
height:
52px !important;
}
/* Submit button */
.osBox.osBox-100.osDetail.osContent
input.osButton {
width:
100% !important;
height:
64px !important;
min-height:
0 !important;
padding:
0 24px !important;
border-radius:
999px !important;
font-size:
clamp(
12px,
5vw,
18px
) !important;
}
}
/* =========================================================
375px - 400px
========================================================= */
@media (min-width: 375px) and (max-width: 400px) {
.osBox.osBox-100.osDetail.osContent {
padding:
22px 14px !important;
}
}
/* =========================================================
PRIMARY-COLOUR DEPENDENT FORM BACKGROUND
If primary colour is #FB3231, form background becomes #F3F3F3.
Otherwise the default --form-bg value is used.
========================================================= */
:root.ctms-primary-red {
--form-bg: #F3F3F3;
}
(function () {
/* =====================================================
PRIMARY-COLOUR DEPENDENT FORM BACKGROUND
=====================================================
Testing primary colour is #00ADEE.
If the primary colour becomes #FB3231, the form
background is changed to #F3F3F3 automatically.
*/
function updatePrimaryDependentStyles() {
const primary =
getComputedStyle(document.documentElement)
.getPropertyValue('--site-primary-override')
.trim();
const probe = document.createElement('span');
probe.style.color = primary;
probe.style.display = 'none';
document.body.appendChild(probe);
const resolvedPrimary =
getComputedStyle(probe).color;
probe.remove();
const isRedPrimary =
resolvedPrimary === 'rgb(251, 50, 49)';
document.documentElement.classList.toggle(
'ctms-primary-red',
isRedPrimary
);
}
/* =====================================================
SETTINGS
===================================================== */
const ITEMS_PER_PAGE = 8;
/* =====================================================
INITIALISE
===================================================== */
updatePrimaryDependentStyles();
function initialiseCTMSStudyList() {
const container =
document.querySelector(
'.rt-embed.rt-container'
);
if (!container) {
return false;
}
const listings =
container.querySelectorAll(
'.osListing'
);
if (!listings.length) {
return false;
}
/*
* Prevent duplicate initialisation.
*/
if (
container.dataset.ctmsEnhanced === 'true'
) {
return true;
}
container.dataset.ctmsEnhanced =
'true';
/* =================================================
SEARCH BAR
================================================= */
const searchWrapper =
document.createElement(
'div'
);
searchWrapper.className =
'ctms-study-search';
const inputWrapper =
document.createElement(
'div'
);
inputWrapper.className =
'ctms-search-input-wrapper';
/* Search input */
const searchInput =
document.createElement(
'input'
);
searchInput.type =
'search';
searchInput.className =
'ctms-study-search-input';
searchInput.placeholder =
'Search study...';
searchInput.setAttribute(
'aria-label',
'Search study title'
);
/* Clear button */
const clearButton =
document.createElement(
'button'
);
clearButton.type =
'button';
clearButton.className =
'ctms-search-clear';
clearButton.innerHTML =
'×';
clearButton.setAttribute(
'aria-label',
'Clear search'
);
inputWrapper.appendChild(
searchInput
);
inputWrapper.appendChild(
clearButton
);
/* Search button */
const searchButton =
document.createElement(
'button'
);
searchButton.type =
'button';
searchButton.className =
'ctms-study-search-button';
searchButton.textContent =
'Search';
searchWrapper.appendChild(
inputWrapper
);
searchWrapper.appendChild(
searchButton
);
/* =================================================
INSERT SEARCH BAR
================================================= */
const header =
container.querySelector(
'.osHeader'
);
if (header) {
header.parentNode.insertBefore(
searchWrapper,
header
);
} else {
container.prepend(
searchWrapper
);
}
/* =================================================
NO RESULTS
================================================= */
const noResults =
document.createElement(
'div'
);
noResults.className =
'ctms-no-results';
noResults.textContent =
'No studies found matching your search.';
/* =================================================
PAGINATION
================================================= */
const pagination =
document.createElement(
'div'
);
pagination.className =
'ctms-pagination';
const listingParent =
listings[0].parentNode;
listingParent.appendChild(
noResults
);
listingParent.appendChild(
pagination
);
/* =================================================
STATE
================================================= */
let currentPage = 1;
let currentSearch = '';
/* =================================================
STUDY TITLE
================================================= */
function getStudyTitle(
listing
) {
const title =
listing.querySelector(
'.osDetail > h2'
);
if (!title) {
return '';
}
return title.textContent
.replace(
/\s+/g,
' '
)
.trim()
.toLowerCase();
}
/* =================================================
FILTER STUDIES
================================================= */
function getFilteredListings() {
return Array
.from(listings)
.filter(
function (listing) {
const title =
getStudyTitle(
listing
);
/*
* No search =
* show every study.
*/
if (
currentSearch === ''
) {
return true;
}
/*
* Search ONLY
* study title.
*/
return title.indexOf(
currentSearch
) !== -1;
}
);
}
/* =================================================
CLEAR SEARCH ICON
================================================= */
function updateClearButton() {
if (
searchInput.value.trim() !== ''
) {
clearButton.style.setProperty(
'display',
'inline-flex',
'important'
);
} else {
clearButton.style.setProperty(
'display',
'none',
'important'
);
}
}
/* =================================================
PAGINATION
================================================= */
function renderPagination(
totalPages
) {
pagination.innerHTML =
'';
if (
totalPages 1
) {
currentPage--;
renderStudies();
}
}
);
pagination.appendChild(
previousButton
);
/* Page numbers */
for (
let page = 1;
page <= totalPages;
page++
) {
const pageButton =
document.createElement(
'button'
);
pageButton.type =
'button';
pageButton.textContent =
page;
if (
page === currentPage
) {
pageButton.classList.add(
'ctms-page-active'
);
}
pageButton.addEventListener(
'click',
function () {
currentPage =
page;
renderStudies();
}
);
pagination.appendChild(
pageButton
);
}
/* Next */
const nextButton =
document.createElement(
'button'
);
nextButton.type =
'button';
nextButton.className =
'ctms-page-arrow';
nextButton.innerHTML =
'›';
nextButton.disabled =
currentPage === totalPages;
nextButton.addEventListener(
'click',
function () {
if (
currentPage totalPages
) {
currentPage =
totalPages;
}
/*
* Calculate current range.
*/
const startIndex =
(
currentPage - 1
) *
ITEMS_PER_PAGE;
const endIndex =
startIndex +
ITEMS_PER_PAGE;
/*
* Show only the
* current 8 studies.
*/
filteredListings
.slice(
startIndex,
endIndex
)
.forEach(
function (listing) {
listing.style.setProperty(
'display',
'block',
'important'
);
}
);
/*
* Update pagination.
*/
renderPagination(
totalPages
);
}
/* =================================================
PERFORM SEARCH
================================================= */
function performSearch() {
currentSearch =
searchInput.value
.trim()
.toLowerCase();
/*
* New search always
* starts from page 1.
*/
currentPage = 1;
renderStudies();
}
/* =================================================
SEARCH BUTTON CLICK
================================================= */
searchButton.addEventListener(
'click',
function () {
performSearch();
}
);
/* =================================================
ENTER KEY
================================================= */
searchInput.addEventListener(
'keydown',
function (event) {
if (
event.key === 'Enter'
) {
event.preventDefault();
performSearch();
}
}
);
/* =================================================
INPUT CHANGE
================================================= */
searchInput.addEventListener(
'input',
function () {
updateClearButton();
}
);
/* =================================================
CLEAR SEARCH
================================================= */
clearButton.addEventListener(
'click',
function () {
searchInput.value =
'';
currentSearch =
'';
currentPage =
1;
updateClearButton();
renderStudies();
/*
* Put focus back into
* the search field.
*/
searchInput.focus();
}
);
/* =================================================
INITIAL RENDER
================================================= */
updateClearButton();
renderStudies();
return true;
}
/* =====================================================
INITIAL ATTEMPT
===================================================== */
if (
initialiseCTMSStudyList()
) {
return;
}
/* =====================================================
CTMS DYNAMIC CONTENT
===================================================== */
const observer =
new MutationObserver(
function () {
if (
initialiseCTMSStudyList()
) {
observer.disconnect();
}
}
);
observer.observe(
document.body,
{
childList: true,
subtree: true
}
);
/* =====================================================
STOP OBSERVER AFTER 30 SECONDS
===================================================== */
setTimeout(
function () {
observer.disconnect();
},
30000
);
})();
