/* ========================================================= CTMS GLOBAL VARIABLES ========================================================= */ /* .root { */ .ecn-subsite-container { /* --site-primary-override variabled will be defined as Subsite Primary in global colour scheme if not defined #00ADEE will be overridden */ --site-primary-override: #00ADEE; --site-font-family: "DM Sans"; --pill-bg: #F3F3F3; --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. ========================================================= */ .ecn-subsite-container .rt-embed.rt-container, .ecn-subsite-container .rt-embed.rt-container *, .ecn-subsite-container .rt-embed.rt-container *::before, .ecn-subsite-container .rt-embed.rt-container *::after, .ecn-subsite-container .study-page, .ecn-subsite-container .study-page *, .ecn-subsite-container .study-page *::before, .ecn-subsite-container .study-page *::after, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *::before, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *::after { font-family: var(--site-font-family) !important; } /* ========================================================= MAIN CONTAINER ========================================================= */ .ecn-subsite-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 ========================================================= */ .ecn-subsite-container .osTitle .rt-home-button { color: var(--site-primary-override) !important; } /* ========================================================= SEARCH BAR ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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; } .ecn-subsite-container .rt-embed.rt-container .ctms-study-search input.ctms-study-search-input::placeholder { color: #98A5B3 !important; opacity: 1 !important; } .ecn-subsite-container .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 */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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; } .ecn-subsite-container .ctms-search-clear:hover { background: #F0F3F5 !important; color: var(--site-text) !important; } /* ========================================================= SEARCH BUTTON ========================================================= */ .ecn-subsite-container .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; } .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container div:has(> .rt-keyword-container) { display: flex; } .ecn-subsite-container .rt-embed .osHeader .osTitle { margin: 0 0 clamp(18px, 1.25vw, 24px) !important; padding: 0 !important; color: var(--site-heading) !important; font-size: clamp(1.75rem, 1.4769rem + 1.165vw, 2.875rem) !important; font-style: normal !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } /* ========================================================= STUDY AREA HEADING ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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; } .ecn-subsite-container .rt-embed .rt-keyword-container p.osStudyItem, .ecn-subsite-container .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; } .ecn-subsite-container .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; */ background: var(--pill-bg) !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; } .ecn-subsite-container .rt-embed .rt-keyword:hover { background: var(--site-primary-override) !important; border-color: var(--site-primary-override) !important; color: #FFFFFF !important; } /* ========================================================= STUDY CARD ========================================================= */ .ecn-subsite-container .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(170px, 12vw, 210px) clamp(14px, 0.83vw, 16px) clamp(16px, 1.25vw, 24px) !important; box-sizing: border-box !important; overflow: hidden !important; background: var(--pill-bg) !important; border: 1px solid var(--site-card-border) !important; border-radius: clamp(9px, 0.63vw, 12px) !important; } /* ========================================================= HIDE CTMS THUMBNAIL ========================================================= */ .ecn-subsite-container .rt-embed .osListing .osThumb { display: none !important; } /* ========================================================= STUDY DETAILS ========================================================= */ .ecn-subsite-container .rt-embed .osListing .osDetail { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= STUDY TITLE ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 */ .ecn-subsite-container .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; } .ecn-subsite-container .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; } .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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: var(--pill-bg) !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; } .ecn-subsite-container .rt-embed .osListing input.osButton.osButton-inline:hover { background: var(--site-primary-override) !important; border-color: var(--site-primary-override) !important; color: #FFFFFF !important; } .ecn-subsite-container .rt-embed .osListing .rt-study-area-buttons:hover::after { background: #FFFFFF !important; } /* Remove CTMS inline margin */ .ecn-subsite-container .rt-embed .osListing .rt-study-area-buttons input { margin-right: 0 !important; } /* ========================================================= NO RESULTS ========================================================= */ .ecn-subsite-container .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; } .ecn-subsite-container .ctms-no-results.ctms-show { display: block !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ecn-subsite-container .ctms-study-search { gap: 8px !important; } .ecn-subsite-container .ctms-study-search-button { flex: 0 0 105px !important; width: 105px !important; } .ecn-subsite-container .ctms-study-search-input { height: 42px !important; min-height: 42px !important; } .ecn-subsite-container .rt-embed .osHeader .osTitle, .ecn-subsite-container .rt-embed h2.osArea { font-size: clamp( 22px, 5.8vw, 30px ) !important; } .ecn-subsite-container .rt-embed .rt-keyword-container { margin: 0 5px 7px 0 !important; } .ecn-subsite-container .rt-embed .osListing { min-height: 88px !important; padding: 12px 104px 12px 12px !important; } .ecn-subsite-container .rt-embed .osListing .osDetail > h2 { font-size: 15px !important; line-height: 1.35 !important; } .ecn-subsite-container .rt-embed .osListing .osDetail p { font-size: 11px !important; } .ecn-subsite-container .rt-embed .osListing .rt-study-area-buttons { right: 9px !important; } .ecn-subsite-container .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; } .ecn-subsite-container .rt-embed .osListing .rt-study-area-buttons::after { right: 10px !important; width: 13px !important; height: 13px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ecn-subsite-container .ctms-study-search-button { flex: 0 0 90px !important; width: 90px !important; padding: 0 10px !important; } .ecn-subsite-container .ctms-study-search-input { padding-left: 38px !important; padding-right: 38px !important; } .ecn-subsite-container .rt-embed .osListing { min-height: 86px !important; padding: 12px 96px 12px 12px !important; } .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osTitle, .ecn-subsite-container .osTitle *, .ecn-subsite-container .osTitle *::before, .ecn-subsite-container .osTitle *::after { font-family: var(--site-font-family) !important; } .ecn-subsite-container .osTitle { font-size: clamp( 18px, calc(16.54px + 0.388vw), 24px ) !important; font-weight: 600 !important; line-height: 1.2 !important; } /* ========================================================= CTMS ========================================================= */ .ecn-subsite-container .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. ========================================================= */ .ecn-subsite-container .study-page .section-label { color: var(--site-primary-override) !important; } /* ========================================================= PILLS ========================================================= */ .ecn-subsite-container .study-page .study-tag { color: var(--site-primary-override) !important; border-color: var(--site-primary-override) !important; background: color-mix( in srgb, var(--site-primary-override) 8%, white ) !important; } /* ========================================================= PARTICIPATION BULLETS ========================================================= */ .ecn-subsite-container .study-page .participation-list li::before { background: var(--site-primary-override) !important; } /* ========================================================= JOURNEY / FLOW ========================================================= */ /* Number colour only. Circle background remains unchanged. */ .ecn-subsite-container .study-page .journey-number { color: var(--site-primary-override) !important; } /* Flow title */ .ecn-subsite-container .study-page .journey-title { color: var(--site-primary-override) !important; } /* Dashed connecting line */ .ecn-subsite-container .study-page .journey-line { border-top-color: var(--site-primary-override) !important; } /* ========================================================= BENEFITS ========================================================= */ .ecn-subsite-container .study-page .benefit-title { color: var(--site-primary-override) !important; } /* Benefit underline, if present */ .ecn-subsite-container .study-page .benefit-title::after { background: var(--site-primary-override) !important; } /* ========================================================= APPLICATION FORM ========================================================= */ /* ========================================================= FORM VARIABLES + CONTAINER ========================================================= */ .ecn-subsite-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(--pill-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; } .ecn-subsite-container .rt-study-content-singlepage-application { background-color: #FFFFFF !important; border: none !important; } /* ========================================================= FORM BOX SIZING ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *::before, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent *::after { box-sizing: border-box; } /* ========================================================= FORM HEADING ========================================================= Existing CTMS heading/content remains unchanged. Only styling is applied. ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent > div[style*="margin: 3px"] { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; } /* ========================================================= FORM LABELS ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent .osFormValue.singlePageBlockElem { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= TEXT INPUTS ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="text"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="email"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="tel"], .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input::placeholder { color: var(--form-placeholder) !important; opacity: 1 !important; } /* ========================================================= FORM FIELDS — STANDARD COLOUR ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="text"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="email"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="tel"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="number"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select, .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="text"]:focus, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="email"]:focus, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="tel"]:focus, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="number"]:focus, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select:focus, .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input:invalid, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input.error, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input.invalid, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select.error, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select.invalid, .ecn-subsite-container .osBox.osBox-100.osDetail.osContent textarea.error, .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent > div:has(input[name="FirstName"]) { display: inline-block !important; width: 100%; margin-right: 8px !important; vertical-align: top !important; } .ecn-subsite-container .osBox.osBox-100.osDetail.osContent > div:has(input[name="LastName"]) { display: inline-block !important; width: 100%; vertical-align: top !important; } /* ========================================================= SELECT ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select[data-field="dob_day"] { width: 100%; margin-bottom: 10px !important; } .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select[data-field="dob_day"] + select { width:100%; margin-bottom: 10px !important; } .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select[data-field="dob_day"] + select + select { width: 100%; margin-bottom: 10px !important; } /* ========================================================= RADIO ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent .osFormValue > div[style*="height: 256px"] { width: 100% !important; height: 256px !important; padding: 0 !important; } /* ========================================================= CHECKBOX LIST ROWS ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[name="_ContactTime[]"] { margin-right: 8px !important; accent-color: var(--site-primary-override) !important; } /* ========================================================= CONFIDENTIAL MESSAGE ========================================================= */ .ecn-subsite-container .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. ========================================================= */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent .rt-application-button-container { width: 100% !important; margin: 28px 0 0 !important; padding: 0 !important; text-align: center !important; } .ecn-subsite-container .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 ========================================================= */ .ecn-subsite-container .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) { .ecn-subsite-container .osBox.osBox-100.osDetail.osContent { padding: 24px 16px !important; border-radius: 18px !important; } /* First / Last name become full width */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent > div:has(input[name="FirstName"]), .ecn-subsite-container .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 */ .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="text"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="email"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="tel"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent input[type="number"], .ecn-subsite-container .osBox.osBox-100.osDetail.osContent select { height: 52px !important; } /* Submit button */ .ecn-subsite-container .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) { .ecn-subsite-container .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. ========================================================= */ .ecn-subsite-container.ctms-primary-red { --form-bg: #F3F3F3; } /* ========================================================= MOBILE LAYOUT FIXES ========================================================= */ @media (max-width: 767px) { /* Search: button below the search field */ .ecn-subsite-container .rt-embed.rt-container .ctms-study-search { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 10px !important; margin-bottom: 20px !important; } .ecn-subsite-container .rt-embed.rt-container .ctms-study-search .ctms-search-input-wrapper { display: block !important; width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; } .ecn-subsite-container .rt-embed.rt-container .ctms-study-search button.ctms-study-search-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 0 0 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 20px !important; border-radius: 999px !important; box-sizing: border-box !important; } /* Study card */ .ecn-subsite-container .rt-embed .osListing { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 12px !important; margin-bottom: 10px !important; box-sizing: border-box !important; overflow: hidden !important; } .ecn-subsite-container .rt-embed .osListing .osDetail { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .ecn-subsite-container .rt-embed .osListing .osDetail > h2 { width: 100% !important; margin: 0 0 6px !important; padding: 0 !important; box-sizing: border-box !important; } .ecn-subsite-container .rt-embed .osListing .osDetail > p, .ecn-subsite-container .rt-embed .osListing .osDetail > div:not(.rt-study-area-buttons) { width: 100% !important; box-sizing: border-box !important; } .ecn-subsite-container .rt-embed .osListing .osDetail p { margin-bottom: 0 !important; } /* Study Details below description */ .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; /* justify-content: flex-end !important; */ width: 100% !important; height: auto !important; margin: 12px 0 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; z-index: 1 !important; } .ecn-subsite-container .rt-embed .rt-study-area-buttons { justify-content: flex-start !important; } .ecn-subsite-container .rt-embed .rt-study-area-buttons::after { right: auto !important; left: calc(118px - 30px) !important; } .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons input.osButton.osButton-inline { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 118px !important; max-width: 100% !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 32px 0 14px !important; box-sizing: border-box !important; font-size: 11px !important; line-height: 1 !important; } .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons::after { top: 50% !important; right: 11px !important; width: 13px !important; height: 13px !important; transform: translateY(-50%) !important; } } @media (max-width: 480px) { .ecn-subsite-container .rt-embed.rt-container .ctms-study-search { gap: 8px !important; } .ecn-subsite-container .rt-embed.rt-container .ctms-study-search button.ctms-study-search-button { width: 100% !important; min-width: 0 !important; flex: 0 0 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 16px !important; } .ecn-subsite-container .rt-embed .osListing { padding: 12px !important; } .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons { margin-top: 10px !important; } .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons input.osButton.osButton-inline { min-width: 110px !important; height: 34px !important; min-height: 34px !important; padding: 0 30px 0 12px !important; font-size: 10.5px !important; } .ecn-subsite-container .rt-embed .osListing .osDetail .rt-study-area-buttons::after { right: 10px !important; width: 12px !important; height: 12px !important; } } /* ========================================================= KEYWORD PILLS Keep individual pills on the same horizontal flow. CTMS creates multiple .rt-keyword-container groups; this removes the artificial gap between those groups. ========================================================= */ .ecn-subsite-container .rt-embed .rt-keyword-container { display: inline !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .ecn-subsite-container .rt-embed .rt-keyword-container p.keyword-indiv-elem, .ecn-subsite-container .rt-embed .rt-keyword-container p.osStudyItem { display: inline-block !important; float: none !important; width: auto !important; margin: 0 6px 8px 0 !important; padding: 0 !important; vertical-align: middle !important; line-height: 1 !important; } .ecn-subsite-container .rt-embed .rt-keyword { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; white-space: nowrap !important; } /* ========================================================= FINAL STUDY TEMPLATE OVERRIDES Typography + mobile journey presentation. ========================================================= */ /* --------------------------------------------------------- SECTION LABEL 12px minimum → 18px maximum 375px → 1920px viewport range --------------------------------------------------------- */ .ecn-subsite-container .study-page .section-label { font-size: clamp( 12px, calc(10.5437px + 0.38835vw), 18px ) !important; font-weight: 500 !important; } /* --------------------------------------------------------- H2 28px minimum → 46px maximum 375px → 1920px viewport range --------------------------------------------------------- */ .ecn-subsite-container .study-page h2 { font-size: clamp( 28px, calc(23.6311px + 1.165vw), 46px ) !important; } /* --------------------------------------------------------- BODY TEXT 12px minimum → 18px maximum 375px → 1920px viewport range --------------------------------------------------------- */ .ecn-subsite-container .study-page .study-text { font-size: clamp( 12px, calc(10.5437px + 0.3883vw), 18px ) !important; } /* --------------------------------------------------------- STUDY TAG 10px minimum → 14px maximum --------------------------------------------------------- */ .ecn-subsite-container .study-page .study-tag { font-size: clamp( 10px, calc(9.0291px + 0.2589vw), 14px ) !important; } /* ========================================================= JOURNEY TITLE TYPOGRAPHY Applies across all screen widths. ========================================================= */ .ecn-subsite-container .study-page .journey-title { font-size: clamp(0.75rem, 0.659rem + 0.3883vw, 1.125rem) !important; line-height: 1.3 !important; } /* ========================================================= MOBILE JOURNEY Stack each step one below another. Remove the desktop connecting line. Desktop layout remains unchanged. ========================================================= */ @media (max-width: 767px) { /* Remove connecting line */ .ecn-subsite-container .study-page .journey-line { display: none !important; } /* One step per row */ .ecn-subsite-container .study-page .journey-grid { grid-template-columns: 1fr !important; gap: clamp(24px, 6vw, 32px) !important; } .ecn-subsite-container .study-page .journey-step { width: 100% !important; text-align: center !important; } .ecn-subsite-container .study-page .journey-number { margin: 0 auto clamp(8px, 2vw, 12px) !important; } .ecn-subsite-container .study-page .journey-description { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; font-size: clamp( 11px, calc(10.0291px + 0.2589vw), 14px ) !important; line-height: 1.45 !important; } } /* ========================================================= MOBILE BENEFITS Stack benefit cards vertically on mobile. Desktop layout remains unchanged. ========================================================= */ @media (max-width: 767px) { .ecn-subsite-container .study-page .benefits-grid { grid-template-columns: 1fr !important; gap: clamp(12px, 4vw, 18px) !important; margin-top: clamp(14px, 3vw, 18px) !important; } .ecn-subsite-container .study-page .benefit-card { width: 100% !important; min-width: 0 !important; } .ecn-subsite-container .study-page .benefit-title { font-size: clamp( 14px, calc(13.0291px + 0.2589vw), 16px ) !important; line-height: clamp( 22px, calc(20.0582px + 0.5178vw), 28px ) !important; } .ecn-subsite-container .study-page .benefit-description { font-size: clamp( 12px, calc(11.0291px + 0.2589vw), 14px ) !important; line-height: clamp( 20px, calc(18.7058px + 0.3452vw), 22px ) !important; } } /* ========================================================= FAQ TYPOGRAPHY 12px minimum at 375px → 18px maximum at 1920px Existing FAQ layout and styling remain unchanged. ========================================================= */ .ecn-subsite-container .study-page .faq-question { font-size: clamp( 12px, calc(10.5437px + 0.38835vw), 18px ) !important; } .ecn-subsite-container .study-page .faq-answer { font-size: clamp( 12px, calc(10.5437px + 0.38835vw), 18px ) !important; } /* ========================================================= MAIN SECTION LABEL 16px minimum at 375px → 24px maximum at 1920px ========================================================= */ .ecn-subsite-container .study-page .section-label-main { font-size: clamp( 16px, calc(14.0583px + 0.5178vw), 24px ) !important; text-transform: capitalize !important; } /* ========================================================= CTMS TYPOGRAPHY OVERRIDES 12px minimum at 375px → 16px maximum at 1920px ========================================================= */ .ecn-subsite-container .rt-embed .osListing .osDetail p, .ecn-subsite-container .rt-embed .rt-keyword, .ecn-subsite-container .rt-embed .osListing input.osButton.osButton-inline { font-size: clamp( 12px, calc(11.0291px + 0.2589vw), 16px ) !important; } /* CTA font weight */ .ecn-subsite-container .rt-embed .osListing input.osButton.osButton-inline { font-weight: 500 !important; } /* ========================================================= JOURNEY DESCRIPTION TYPOGRAPHY 12px minimum at 375px → 18px maximum at 1920px Applies to all screen widths. ========================================================= */ .ecn-subsite-container .study-page .journey-description { font-size: clamp( 12px, calc(10.5437px + 0.38835vw), 18px ) !important; } /* ========================================================= BENEFIT TITLE TYPOGRAPHY 12px minimum at 375px → 14px maximum at 1920px Applies to all screen widths. ========================================================= */ .ecn-subsite-container .study-page .benefit-title { font-size: clamp( 12px, calc(11.5146px + 0.12945vw), 14px ) !important; } /* ========================================================= BENEFIT DESCRIPTION TYPOGRAPHY 12px across all screen widths. ========================================================= */ .ecn-subsite-container .study-page .benefit-description { font-size: 12px !important; }