/* ========================================================= JOIN OUR TEAM — public recruitment surfaces Mobile first throughout: every rule below is the phone layout, and the only media queries widen it. Somebody arriving cold from a Facebook post on a 375px screen is the primary reader, not an afterthought. Reuses the same token layer the petition surfaces introduced (--hpp-*), because both are public HertsPartners pages that must flip cleanly with the site's dark class and neither should invent a third palette. Dark mode here is the SAME mechanism as everywhere else on this site: a class on , never prefers-color-scheme. ========================================================= */ .hp-join { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; color: var(--hpp-body); font-family: var(--hp-font-body, inherit); } .hp-join--narrow { max-width: 560px; } /* ---------- hero ---------- */ .hp-join__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--hpp-accent); margin: 32px 0 8px; } .hp-join__title { font-family: var(--hp-font-heading, inherit); font-size: clamp(28px, 7vw, 44px); line-height: 1.12; color: var(--hpp-ink); margin: 0 0 14px; } .hp-join__standfirst { font-size: 17px; line-height: 1.6; margin: 0 0 20px; } .hp-join__reassure { font-size: 15px; color: var(--hpp-muted); margin: 0 0 8px; } .hp-join__position-subtitle { font-size: 16px; font-weight: 650; color: var(--hpp-accent); margin: -6px 0 14px; } .hp-join__back { margin: 24px 0 0; font-size: 15px; } .hp-join__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--hpp-accent); text-decoration: none; /* A real 44px target, not a 15px word. */ min-height: 44px; } .hp-join__back a:hover { text-decoration: underline; } /* ---------- the two opportunity cards ---------- Identical geometry on purpose. Only the accent and the mark differ, so neither reads as the secondary option. */ .hp-join__grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 18px; } @media (min-width: 720px) { .hp-join__grid { grid-template-columns: 1fr 1fr; gap: 20px; } } .hp-join__card { --hp-join-accent: var(--hpp-brand); background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 18px); box-shadow: var(--hpp-shadow); overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hp-join__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--hp-join-accent), var(--hpp-accent-bg)); } .hp-join__card--community { --hp-join-accent: #DB2777; } .hp-join__card--build { --hp-join-accent: #4338CA; } .hp-join__card:hover, .hp-join__card:focus-within { transform: translateY(-2px); box-shadow: var(--hpp-shadow-lift); border-color: var(--hpp-accent-soft); } @media (prefers-reduced-motion: reduce) { .hp-join__card { transition: none; } .hp-join__card:hover, .hp-join__card:focus-within { transform: none; } } .hp-join__card-link { display: block; padding: 24px 20px 22px; color: inherit; text-decoration: none; height: 100%; } /* The card IS the link; Hello Elementor underlines every anchor inside .page-content at (0,1,1), which would underline the whole card. */ .hp-join .hp-join__card-link, .hp-join .hp-join__card-link:hover { text-decoration: none; } .hp-join__card-mark { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--hp-join-accent) 14%, transparent); color: var(--hp-join-accent); margin-bottom: 14px; } .hp-join__card-mark svg { width: 26px; height: 26px; fill: currentColor; } .hp-join__card-title { font-family: var(--hp-font-heading, inherit); font-size: 22px; line-height: 1.25; color: var(--hpp-ink); margin: 0 0 6px; } .hp-join__card-subtitle { display: block; font-size: 14px; font-weight: 600; color: var(--hpp-muted); margin-top: 3px; } .hp-join__card-line { font-size: 16px; line-height: 1.55; margin: 0 0 16px; } .hp-join__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; } .hp-join__chip { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--hpp-tint); border: 1px solid var(--hpp-border-strong); color: var(--hpp-accent-strong); } .hp-join__card-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--hp-join-accent); min-height: 44px; } /* ---------- position page ---------- */ .hp-join__section { margin: 0 0 30px; } .hp-join__section h2 { font-family: var(--hp-font-heading, inherit); font-size: 22px; color: var(--hpp-ink); margin: 0 0 10px; } .hp-join__section p { font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; } .hp-join__list { margin: 0 0 12px; padding-left: 20px; } .hp-join__list li { font-size: 16.5px; line-height: 1.6; margin-bottom: 8px; } .hp-join__practical { background: var(--hpp-tint); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 14px); padding: 20px 20px 16px; } .hp-join__list--practical { padding-left: 18px; } .hp-join__cta { border: 1px solid var(--hpp-accent-soft); background: var(--hpp-tint); border-radius: var(--hp-radius-lg, 18px); padding: 24px 20px; margin: 34px 0 0; box-shadow: 0 10px 34px color-mix(in srgb, var(--hpp-brand) 14%, transparent); } .hp-join__cta h2 { margin-top: 0; } .hp-join__apply { margin: 0 0 30px; } a.hp-join__apply-btn, a.hp-join__apply-btn:hover { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--hp-radius-pill, 999px); background: var(--hpp-accent-bg); color: var(--hpp-on-accent); font-weight: 700; font-size: 17px; text-decoration: none; width: 100%; } a.hp-join__apply-btn:hover { background: var(--hpp-accent-bg-hover); } @media (min-width: 560px) { /* * The :hover selector has to be here too. The base rule sets width:100% * on BOTH .hp-join__apply-btn and .hp-join__apply-btn:hover, so overriding * only the plain selector left the hover state still at 100% and more * specific than this rule -- the button sat at its natural width and then * jumped to full width the moment a cursor touched it. */ a.hp-join__apply-btn, a.hp-join__apply-btn:hover { width: auto; } } .hp-join__note { margin-top: 8px; padding: 22px 20px; border-radius: var(--hp-radius-md, 14px); background: var(--hpp-tint); border: 1px solid var(--hpp-border); } .hp-join__note h2 { font-size: 19px; margin: 0 0 10px; color: var(--hpp-ink); } .hp-join__note p { font-size: 16px; line-height: 1.6; margin: 0 0 10px; } .hp-join__note p:last-child { margin-bottom: 0; } .hp-join__privacy { font-size: 14px; line-height: 1.6; color: var(--hpp-muted); margin: 18px 0 0; } /* ---------- forms ---------- */ .hp-join__form { margin: 0; } .hp-join__auth-grid { display: grid; gap: 18px; } @media (min-width: 720px) { .hp-join__auth-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .hp-join__auth-card { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 18px); padding: 22px 20px; box-shadow: var(--hpp-shadow); } .hp-join__auth-card h2 { font-size: 19px; margin: 0 0 16px; color: var(--hpp-ink); } .hp-join__fieldset { border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 14px); background: var(--hpp-surface); padding: 18px 16px 6px; margin: 0 0 20px; min-width: 0; } .hp-join__fieldset > legend { /* A real for assistive technology, drawn as a heading rather than notched into the border. */ float: left; width: 100%; padding: 0; margin: 0 0 14px; font-family: var(--hp-font-heading, inherit); font-size: 19px; font-weight: 700; color: var(--hpp-ink); } .hp-join__fieldset::after { content: ''; display: table; clear: both; } .hp-join__subfieldset { border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 12px); background: var(--hpp-tint); padding: 14px 14px 8px; margin: 0 0 16px; min-width: 0; } .hp-join__subfieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 650; font-size: 16px; color: var(--hpp-ink); } .hp-join__subfieldset::after { content: ''; display: table; clear: both; } /* * clear: both is load-bearing. * * The legend above is `float: left; width: 100%` -- the old trick for making a * behave like a block. A float is out of flow, so without clearing it * the options wrapped AROUND the legend and sat off to its right, outside the * question card. The card looked like it had lost its answers. */ .hp-join__options { display: flex; flex-wrap: wrap; gap: 8px; clear: both; } /* Same reason: anything else following that floated legend must clear it too. */ .hp-join__subfieldset > .hp-field__help, .hp-join__subfieldset > .hp-field__error { clear: both; } .hp-join__option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 11px; border: 1px solid var(--hpp-border-strong); border-radius: 999px; background: var(--hpp-field); font-size: 15.5px; color: var(--hpp-body); cursor: pointer; } .hp-join__option input { width: 20px; height: 20px; margin: 0; accent-color: var(--hpp-brand); } .hp-join__option:has(input:checked) { border-color: var(--hpp-brand); box-shadow: inset 0 0 0 1px var(--hpp-brand); color: var(--hpp-ink); font-weight: 650; } .hp-join__option:has(input:focus-visible) { outline: 2px solid var(--hpp-brand); outline-offset: 2px; } .hp-join__check { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 4px 0; } .hp-join__check input { width: 24px; height: 24px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--hpp-brand); } .hp-join__check label { font-size: 16px; line-height: 1.5; color: var(--hpp-body); } .hp-field--feature { background: var(--hpp-tint); border: 1px solid var(--hpp-accent-soft); border-radius: var(--hp-radius-md, 12px); padding: 16px 14px 2px; } .hp-join__optional-note { font-size: 15px; color: var(--hpp-muted); margin: 0 0 16px; } .hp-join__files { list-style: none; margin: 0 0 16px; padding: 0; font-size: 15px; } .hp-join__files li { padding: 8px 0; border-bottom: 1px solid var(--hpp-border); } .hp-join__files span { color: var(--hpp-muted); } .hp-join__errors { border: 2px solid var(--hpp-danger-ink); background: var(--hpp-danger-bg); border-radius: var(--hp-radius-md, 12px); padding: 16px 18px; margin: 0 0 22px; } .hp-join__errors h2 { font-size: 17px; margin: 0 0 8px; color: var(--hpp-danger-ink); } .hp-join__errors ul { margin: 0; padding-left: 20px; } .hp-join__errors a { color: var(--hpp-danger-ink); } .hp-join__notice { background: var(--hpp-success-bg); color: var(--hpp-success-ink); border-radius: var(--hp-radius-md, 12px); padding: 14px 16px; margin: 0 0 20px; font-size: 15.5px; } .hp-join__actions { display: grid; gap: 12px; margin-top: 24px; } button.hp-join__submit { font: inherit; font-weight: 700; font-size: 17px; width: 100%; min-height: 54px; border: 0; border-radius: var(--hp-radius-md, 12px); background: var(--hpp-accent-bg); color: var(--hpp-on-accent); cursor: pointer; } button.hp-join__submit:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } button.hp-join__submit--secondary { background: var(--hpp-surface); color: var(--hpp-accent); border: 1.5px solid var(--hpp-accent-soft); } button.hp-join__submit--secondary:hover { background: var(--hpp-tint); color: var(--hpp-accent-strong); } button.hp-join__linkbtn { font: inherit; font-size: 15.5px; background: none; border: 0; color: var(--hpp-accent); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0; } .hp-join__reset { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hpp-border); } .hp-join__anchor { display: block; height: 0; } /* ---------- my applications ---------- */ .hp-myapps { margin: 0 0 32px; } .hp-myapps__heading { font-size: 21px; color: var(--hpp-ink); margin: 0 0 14px; } .hp-myapps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .hp-myapps__item { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 14px); box-shadow: var(--hpp-shadow); } .hp-myapps__item a { display: block; padding: 16px 18px; color: inherit; text-decoration: none; } .hp-myapps__item a:hover { text-decoration: none; } .hp-myapps__position { font-weight: 700; font-size: 17px; color: var(--hpp-ink); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; } .hp-myapps__meta { font-size: 14.5px; color: var(--hpp-muted); margin: 0 0 8px; } .hp-myapps__status { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 650; color: var(--hpp-accent); margin: 0; } .hp-myapps__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; } .hp-myapps__empty { border: 1px dashed var(--hpp-border-strong); border-radius: var(--hp-radius-md, 14px); padding: 22px 18px; text-align: center; } .hp-myapp { max-width: 700px; } .hp-myapp__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: var(--hpp-accent); margin: 0 0 4px; } .hp-myapp__header h2 { font-family: var(--hp-font-heading, inherit); font-size: 26px; color: var(--hpp-ink); margin: 0 0 6px; } .hp-myapp__submitted { font-size: 14.5px; color: var(--hpp-muted); margin: 0 0 20px; } .hp-myapp__ref { display: inline-block; margin-left: 10px; font-family: ui-monospace, monospace; letter-spacing: .05em; } .hp-myapp__sent { background: var(--hpp-success-bg); color: var(--hpp-success-ink); border-radius: var(--hp-radius-md, 14px); padding: 18px 18px 14px; margin: 0 0 22px; } .hp-myapp__sent h2 { font-size: 19px; margin: 0 0 8px; color: inherit; } .hp-myapp__sent p { margin: 0; font-size: 15.5px; line-height: 1.6; } .hp-myapp__status { background: var(--hpp-tint); border: 1px solid var(--hpp-accent-soft); border-radius: var(--hp-radius-md, 14px); padding: 16px 18px; margin: 0 0 18px; } .hp-myapp__status-label { text-transform: uppercase; letter-spacing: .09em; font-size: 11.5px; font-weight: 700; color: var(--hpp-muted); margin: 0 0 4px; } .hp-myapp__status-value { font-size: 19px; font-weight: 700; color: var(--hpp-ink); margin: 0; } .hp-myapp__timeline { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 2px; } .hp-myapp__step { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 16px; color: var(--hpp-muted); } .hp-myapp__step-mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hpp-border-strong); flex: none; } .hp-myapp__step--done { color: var(--hpp-ink); font-weight: 650; } .hp-myapp__step--done .hp-myapp__step-mark { background: var(--hpp-brand); border-color: var(--hpp-brand); } .hp-myapp__step--current { color: var(--hpp-accent); font-weight: 700; } .hp-myapp__step--current .hp-myapp__step-mark { background: var(--hpp-accent); border-color: var(--hpp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hpp-brand) 22%, transparent); } .hp-myapp__messages { margin: 0 0 28px; } .hp-myapp__message { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-left: 4px solid var(--hpp-brand); border-radius: var(--hp-radius-md, 12px); padding: 16px 18px; margin: 0 0 12px; } .hp-myapp__message h4 { font-size: 16.5px; margin: 0 0 4px; color: var(--hpp-ink); } .hp-myapp__message-date { font-size: 13.5px; color: var(--hpp-muted); margin: 0 0 10px; } .hp-myapp__message-body p { font-size: 15.5px; line-height: 1.6; margin: 0 0 10px; } .hp-myapp__facts { display: grid; gap: 10px; margin: 0 0 22px; } .hp-myapp__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--hpp-muted); font-weight: 700; } .hp-myapp__facts dd { margin: 2px 0 0; font-size: 16px; color: var(--hpp-ink); } @media (min-width: 560px) { .hp-myapp__facts { grid-template-columns: 1fr 1fr; } } .hp-myapp__answer { margin: 0 0 18px; } .hp-myapp__answer h4 { font-size: 15.5px; color: var(--hpp-accent); margin: 0 0 5px; } .hp-myapp__answer p { font-size: 16px; line-height: 1.6; margin: 0; } .hp-myapp__withdraw { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hpp-border); } /* ---------- restricted applicant account ---------- */ .hp-applicant-account { max-width: 700px; margin: 0 auto; padding: 0 16px 56px; color: var(--hpp-body); } .hp-applicant-account__header { display: flex; gap: 16px; align-items: center; margin: 24px 0 28px; } .hp-applicant-account__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hpp-accent-bg); color: var(--hpp-on-accent); font-size: 22px; font-weight: 700; } .hp-applicant-account__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: var(--hpp-accent); margin: 0 0 2px; } .hp-applicant-account__header h2 { font-family: var(--hp-font-heading, inherit); font-size: 24px; color: var(--hpp-ink); margin: 0 0 4px; } .hp-applicant-account__header p { margin: 0; font-size: 15px; color: var(--hpp-muted); } .hp-applicant-account__profile { margin: 30px 0; } .hp-applicant-account__profile h2 { font-size: 20px; color: var(--hpp-ink); margin: 0 0 12px; } .hp-applicant-account__facts { display: grid; gap: 12px; margin: 0 0 12px; } .hp-applicant-account__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--hpp-muted); font-weight: 700; } .hp-applicant-account__facts dd { margin: 2px 0 0; font-size: 16px; color: var(--hpp-ink); } .hp-applicant-account__note { font-size: 14.5px; color: var(--hpp-muted); } .hp-applicant-account__signout { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hpp-border); } .hp-u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- * Two things a 375px screen found that the markup did not. * ------------------------------------------------------------------- */ /* * A long email address has no spaces in it, so nothing wraps and the whole * account header scrolled sideways off the phone. Applied to the specific * places a user-supplied string is printed as a heading, not globally. */ .hp-applicant-account__header h2, .hp-myapp__facts dd, .hp-applicant-account__facts dd { overflow-wrap: anywhere; word-break: break-word; } /* * Hello Elementor's theme.css underlines every anchor inside .page-content at * (0,1,1), and components.css recolours .site-main a at (0,8,2). Both win * against a single class, so a card whose whole body is a link came out fully * underlined -- the same fault already diagnosed twice on the petition * surfaces. Matched from the component root so the specificity is genuinely * higher rather than hopefully higher. */ .hp-join .hp-join__card .hp-join__card-link, .hp-join .hp-join__card .hp-join__card-link:hover, .hp-join .hp-join__card .hp-join__card-link:focus, .hp-myapps .hp-myapps__item a, .hp-myapps .hp-myapps__item a:hover, .hp-myapps .hp-myapps__item a:focus { text-decoration: none; } .hp-myapps .hp-myapps__item a .hp-myapps__position { color: var(--hpp-ink); } .hp-myapps .hp-myapps__item a .hp-myapps__meta { color: var(--hpp-muted); } .hp-myapps .hp-myapps__item a .hp-myapps__status { color: var(--hpp-accent); } /* The card is the target; the focus ring belongs on the card, not the text. */ .hp-join__card:focus-within, .hp-myapps__item:focus-within { outline: 2px solid var(--hpp-brand); outline-offset: 3px; } .hp-join__card-link:focus-visible, .hp-myapps__item a:focus-visible { outline: none; } /* ------------------------------------------------------------------ * * The provider block on our own auth screens. * * Two things had to be fixed here and neither is Google's fault. * * 1. The Facebook control is a