/* ─────────────────────────────────────────────
iworkfor.sa.gov.au — Modern Redesign
Legacy content bridge
Applied on every NON job-search page (login, register, job alerts,
application process, advert detail, and the static CMS pages). The page's
original markup/functionality is untouched — this simply restyles it with
the modern design tokens so the whole site looks consistent.
───────────────────────────────────────────── */
body.modern-mode {
background: var(--bg);
color: var(--text);
font-family: 'South Australia Sans', Arial, Helvetica, sans-serif;
font-size: var(--fs-md);
line-height: 1.55;
}
/* Legacy styles.css (loaded only on non-search pages) greys every .nav-item on
hover. Keep the modern header nav identical to the job search page. */
.site-header .site-nav .nav-item:hover {
background-color: transparent;
}
/* CMS-managed banners ---------------------------------------------------
header-image / header-carousel / header-people / header-paths still render
straight from the CMS — we only restyle their frame so they sit nicely in
the modern layout. Collapses to nothing when the CMS supplies no banner. */
.modern-banner {
max-width: var(--shell);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.modern-banner .header-wrapper,
.modern-banner .header-wrapper-mob,
.modern-banner .carousel {
margin-top: 26px;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-2);
}
.modern-banner .row { margin-left: 0 !important; margin-right: 0 !important; }
.modern-banner .header-main,
.modern-banner .header_image_img {
width: 100%;
background-size: cover;
background-position: center;
}
.modern-banner .header-wrapper-mob .header_image_img {
background-size: contain;
}
/* Mobile banner box height follows the image's real proportion (set by
modern-page.js), so wide CMS images don't letterbox. Default = legacy 60.1%. */
.modern-banner .header-wrapper-mob .header_image_img::before {
padding-top: var(--mob-banner-ratio, 60.1%);
}
/* Carousel controls in brand colours */
.modern-banner .carousel-indicators li { background-color: rgba(255,255,255,.65); border-radius: 999px; }
.modern-banner .carousel-indicators .active { background-color: var(--brand); }
/* The page card sits directly under a banner */
.modern-banner + .modern-page { padding-top: 26px; }
/* Page shell ------------------------------------------------------------
Same max-width as the job search page so the header, body and footer all
share one set of edges. Long-form text inside is kept readable by the
measure cap on .modern-content below rather than by narrowing the shell. */
.modern-page {
max-width: var(--shell);
margin: 0 auto;
padding: 34px var(--pad-x) 70px;
}
/* The legacy markup lives in here */
.modern-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
padding: clamp(20px, 3vw, 38px);
}
/* Typography ------------------------------------------------------------ */
.modern-content h1,
.modern-content h2,
.modern-content h3,
.modern-content h4 {
color: var(--ink);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 1.6em 0 .55em;
}
.modern-content h1:first-child,
.modern-content h2:first-child,
.modern-content h3:first-child { margin-top: 0; }
.modern-content h1 { font-size: var(--fs-4xl); }
.modern-content h2 { font-size: var(--fs-3xl); }
.modern-content h3 { font-size: var(--fs-xl); }
.modern-content h4 { font-size: var(--fs-lg); }
.modern-content h5,
.modern-content h6 {
font-size: var(--fs-lg);
color: var(--ink);
font-weight: 800;
line-height: var(--lh-tight);
margin: 1.6em 0 .55em;
}
.modern-content .faq-body,
.modern-content .faq-body :where(p, ul, ol, li, div, span, a, strong, b, i, em, td, blockquote) {
font-weight: 400 !important;
}
.modern-content .faq-body :is(h1, h2, h3, h4, h5, h6),
.modern-content .faq-body :is(h1, h2, h3, h4, h5, h6) * {
font-weight: 700 !important;
}
body.modern-mode .modern-content .faq-body button.faq-question {
display: block;
width: 100%;
min-height: 44px;
padding: 8px 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
color: inherit !important;
font: inherit;
text-align: left;
white-space: normal;
transform: none;
}
body.modern-mode .modern-content .faq-body button.faq-question:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
/* Body copy -------------------------------------------------------------
The legacy stylesheet sizes p/li in pt (p and li are 16pt ~= 21px, and
.highlighted p is 19pt !important). That is why content pages used to
render noticeably larger text than the job search page, and pt - like px -
ignores the reader's default font size. These rules put legacy content
back on the shared rem scale so every page matches.
!important is required only where the legacy rule also uses it. */
.modern-content p,
.modern-content li,
.modern-content td,
.modern-content dd,
.modern-content dt {
font-size: var(--fs-md);
line-height: var(--lh-body);
}
.modern-content p { margin: 0 0 1em; }
.modern-content ul,
.modern-content ol { margin: 0 0 1.1em 1.25em; }
.modern-content li { margin-bottom: .4em; }
/* Readable measure -------------------------------------------------------
The card now spans the full shell so it lines up with the header, footer
and job cards. Running text is capped near 75 characters so lines stay
readable at that width (WCAG 1.4.8 asks for 80 or fewer).
Applied at any depth, because CMS body HTML nests inconsistently. Text
inside tables is excluded so table cells keep the full column width.
To let a page run edge to edge, remove the cap for that page's wrapper. */
.modern-content p,
.modern-content ul,
.modern-content ol,
.modern-content h2,
.modern-content h3,
.modern-content h4 { max-width: 75ch; }
.modern-content table p,
.modern-content table ul,
.modern-content table ol { max-width: none; }
.modern-content a,
.modern-content a:visited {
color: var(--brand);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.modern-content a:hover {
color: var(--brand-700);
text-decoration-thickness: 2px;
}
.modern-content a:focus-visible {
color: var(--brand-700);
outline: 3px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
body.modern-mode .modern-content :is(p, li) a:not(.btn):not([role="button"]):not(.promo-cta):not(.confirm-action) {
text-decoration-line: underline !important;
text-underline-offset: 3px;
}
body.modern-mode .modern-content a:not(.btn):not([role="button"]):not(.promo-cta):not(.confirm-action),
body.modern-mode .modern-content a:not(.btn):not([role="button"]):not(.promo-cta):not(.confirm-action) span {
color: var(--brand-700) !important;
}
.modern-content hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
body.modern-mode a#tipsheader {
display: inline-block;
margin-block: 8px;
font-family: inherit;
font-size: 14px !important;
font-weight: 600;
line-height: 1.5;
color: var(--brand-700) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
body.modern-mode a#tipsheader:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
body.modern-mode .modern-content label.remember-me-label {
display: inline;
margin: 0;
font: inherit;
color: inherit;
}
body.modern-mode .modern-content label.recovery-email-label { display: block; }
.modern-content #rss-wrapper .share-fallback { margin-right: 8px; }
.modern-content #rss-wrapper a:has(.a2a_svg) .share-fallback { display: none; }
.modern-content img { max-width: 100%; height: auto; }
/* CMS-authored body copy can embed fixed-width media (e.g. a 560px video
iframe), which forces the whole page to scroll sideways on a phone. */
body.modern-mode .modern-content iframe,
body.modern-mode #brs_mainContent iframe,
body.modern-mode .modern-content embed,
body.modern-mode .modern-content object,
body.modern-mode .modern-content video { max-width: 100%; }
/* Forms ----------------------------------------------------------------- */
.modern-content label,
.modern-content .FormLabel,
.modern-content .formlabel,
.modern-content .requiredFieldHead,
.modern-content .head,
.modern-content .headTop {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--ink) !important;
letter-spacing: -0.005em;
}
.modern-content input:not([type]),
.modern-content input[type="text"],
.modern-content input[type="password"],
.modern-content input[type="email"],
.modern-content input[type="tel"],
.modern-content input[type="number"],
.modern-content input[type="date"],
.modern-content input[type="search"],
.modern-content select,
.modern-content textarea {
font-family: inherit;
font-size: var(--fs-base);
color: var(--ink);
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 11px 14px;
max-width: 100%;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.modern-content textarea { line-height: 1.5; }
body.modern-mode .modern-content form#loginform input[type="text"],
body.modern-mode .modern-content form#loginform input[type="password"] {
background: var(--surface-soft);
border: 1px solid var(--border);
padding: 11px 14px;
font-weight: 400;
}
body.modern-mode .modern-content form#loginform input[type="text"]:focus,
body.modern-mode .modern-content form#loginform input[type="password"]:focus,
body.modern-mode .modern-content .legacy-form-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
body.modern-mode .modern-content .legacy-form-table select:focus,
body.modern-mode .modern-content .legacy-form-table textarea:focus {
background: var(--surface);
border-color: var(--brand);
outline: none;
box-shadow: none;
}
.modern-content input:focus,
.modern-content select:focus,
.modern-content textarea:focus {
outline: none;
border-color: var(--brand);
background: #fff;
box-shadow: 0 0 0 3px var(--focus-ring);
}
.modern-content input[type="checkbox"],
.modern-content input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; }
/* Shared legacy forms ---------------------------------------------------
Authentication, password recovery, registration and tenant-defined
utility pages all use table.Form. modern-page.js adds these hooks without
moving controls, so original validation and submit handlers remain intact. */
body.modern-mode .modern-content form.legacy-form-modern {
width: 100%;
max-width: 880px;
margin: 0;
}
body.modern-mode .modern-content table.legacy-form-table {
display: block;
width: 100% !important;
margin: 0;
border: 0;
border-collapse: separate;
background: transparent !important;
}
body.modern-mode .modern-content table.legacy-form-table > tbody {
display: block;
width: 100%;
}
body.modern-mode .modern-content table.legacy-form-table > tbody > tr.legacy-form-row {
display: grid !important;
grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
gap: 10px 22px;
align-items: center;
width: 100% !important;
margin: 0;
padding: 10px 0;
border: 0;
background: transparent !important;
}
body.modern-mode .modern-content table.legacy-form-table > tbody > tr.legacy-form-row > td {
display: block !important;
width: auto !important;
min-width: 0;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
vertical-align: middle;
}
body.modern-mode .modern-content .legacy-form-label {
align-self: start;
padding-top: 12px !important;
color: var(--ink) !important;
font-size: var(--fs-sm) !important;
font-weight: 700 !important;
line-height: 1.35;
text-align: left !important;
white-space: normal;
}
body.modern-mode .modern-content .legacy-form-field {
color: var(--text);
font-size: var(--fs-base);
line-height: var(--lh-body);
}
body.modern-mode .modern-content .legacy-form-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body.modern-mode .modern-content .legacy-form-table select,
body.modern-mode .modern-content .legacy-form-table textarea {
box-sizing: border-box;
width: 100% !important;
max-width: 520px !important;
min-height: 44px;
margin: 0 !important;
}
body.modern-mode .modern-content .legacy-form-table select[multiple] {
min-height: 150px;
}
body.modern-mode .modern-content .legacy-form-unlabelled > td:first-child:empty {
display: block !important;
}
body.modern-mode .modern-content .legacy-form-choice .legacy-form-field {
display: flex !important;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body.modern-mode .modern-content .legacy-form-choice input[type="checkbox"],
body.modern-mode .modern-content .legacy-form-choice input[type="radio"] {
flex: none;
width: 18px !important;
height: 18px;
margin: 0 !important;
}
body.modern-mode .modern-content .legacy-form-actions {
padding-top: 16px !important;
}
body.modern-mode .modern-content .legacy-form-actions br,
body.modern-mode .modern-content .legacy-form-links br {
display: none;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-form-field {
display: flex !important;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-action-secondary {
color: var(--text) !important;
background: var(--surface) !important;
border-color: var(--border-strong) !important;
box-shadow: none !important;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-action-secondary:hover {
color: var(--brand) !important;
background: var(--brand-50) !important;
border-color: var(--brand) !important;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-action-danger {
color: var(--brand) !important;
background: var(--surface) !important;
border-color: var(--brand) !important;
box-shadow: none !important;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-action-danger:hover {
color: var(--brand-700) !important;
background: var(--brand-50) !important;
border-color: var(--brand-700) !important;
}
body.modern-mode .modern-content .legacy-form-links {
padding: 3px 0 !important;
}
body.modern-mode .modern-content .legacy-form-links a,
body.modern-mode .modern-content .legacy-form-links a:visited,
body.modern-mode .modern-content a.brs_terms {
color: var(--brand) !important;
font-size: var(--fs-sm) !important;
font-weight: 600;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 3px;
}
body.modern-mode .modern-content .legacy-form-links a:hover,
body.modern-mode .modern-content a.brs_terms:hover {
color: var(--brand-700) !important;
}
body.modern-mode .modern-content fieldset {
min-width: 0;
margin: 0 0 22px;
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface);
}
body.modern-mode .modern-content legend {
width: auto;
margin: 0;
padding: 0 8px;
color: var(--ink);
font-size: var(--fs-lg);
font-weight: 700;
}
body.modern-mode .modern-content .badMessage,
body.modern-mode .modern-content .goodMessage,
body.modern-mode .modern-content #JSWarning {
box-sizing: border-box;
width: 100% !important;
max-width: 75ch;
margin: 0 0 20px !important;
padding: 14px 16px !important;
border: 1px solid var(--border-strong) !important;
border-radius: var(--r) !important;
background: var(--surface-soft) !important;
color: var(--text);
font-size: var(--fs-base) !important;
}
body.modern-mode .modern-content .badMessage {
border-color: var(--brand-200) !important;
background: var(--brand-50) !important;
color: var(--brand-700);
}
body.modern-mode .modern-content .goodMessage {
border-color: #b8d8c6 !important;
background: #edf7f1 !important;
color: var(--success);
}
/* Authentication and public registration pages use the same compact card
and field rhythm as the search/apply interfaces instead of a wide empty
legacy table. */
body.modern-mode .modern-page.is-auth {
max-width: 980px;
}
body.modern-mode .modern-page.is-auth .modern-content {
padding: clamp(24px, 4vw, 44px);
}
body.modern-mode .modern-page.is-auth .modern-content h1 {
margin: 0 0 28px;
font-size: clamp(1.625rem, 3vw, 2.25rem);
font-weight: 700;
text-transform: none !important;
}
body.modern-mode .modern-page.is-auth form.legacy-form-modern {
max-width: 680px;
}
body.modern-mode .modern-page.is-auth .legacy-form-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
max-width: 440px !important;
}
@media (max-width: 767px) {
body.modern-mode .modern-page.is-auth .legacy-form-table :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea) {
font-size: 16px !important;
}
}
body.modern-mode .modern-page.is-auth .tr-google-captcha .legacy-form-field {
overflow: hidden;
}
body.modern-mode .modern-page.is-auth .g-recaptcha,
body.modern-mode .modern-page.is-auth iframe {
max-width: 100% !important;
}
/* Buttons ---------------------------------------------------------------
Geometry below is the prototype's .btn rule verbatim: pill radius,
14px/700 text, -0.1px tracking and the same press transform. Role
colours (primary / save / back) are applied further down so every
button on every modern page resolves to one of the prototype's three
treatments and nothing is left on a browser default. */
.modern-content .btn,
.modern-content button,
.modern-content input[type="submit"],
.modern-content input[type="button"],
.modern-content input[type="reset"],
.modern-content .button,
.modern-content a.btn-orange,
.modern-content .btn-grey {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: var(--fs-base);
font-weight: 700;
letter-spacing: -0.1px;
line-height: 1;
min-height: 44px;
text-transform: none !important;
color: #fff !important;
background: var(--brand) !important;
border: 1px solid var(--brand) !important;
border-radius: 999px !important;
padding: 11px 22px !important;
cursor: pointer;
white-space: nowrap;
text-decoration: none !important;
box-shadow: var(--sh-1);
transition: background var(--t-fast), color var(--t-fast),
border-color var(--t-fast), transform var(--t-fast),
box-shadow var(--t-fast);
}
.modern-content .btn:hover,
.modern-content button:hover,
.modern-content input[type="submit"]:hover,
.modern-content input[type="button"]:hover,
.modern-content .button:hover,
.modern-content .btn-grey:hover {
color: #000 !important;
background: var(--brand-600) !important;
border-color: var(--brand-600) !important;
transform: translateY(-1px);
box-shadow: var(--sh-2);
}
.modern-content .btn:active,
.modern-content button:active,
.modern-content input[type="submit"]:active,
.modern-content input[type="button"]:active,
.modern-content .button:active { transform: translateY(0.5px) scale(0.99); }
/* Keyboard focus must stay obvious: these are pill buttons on a tinted
page, where the UA default ring is easy to lose. */
body.modern-mode .modern-content #forgottenPassword .resetBtn:focus,
body.modern-mode .modern-content #forgottenPassword .resetBtn:active {
box-shadow: none;
}
body.modern-mode .modern-content #forgottenPassword .resetBtn:focus:not(:focus-visible) {
outline: none;
}
.modern-content .btn:focus-visible,
.modern-content button:focus-visible,
.modern-content input[type="submit"]:focus-visible,
.modern-content input[type="button"]:focus-visible,
.modern-content input[type="reset"]:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* The page disables both buttons for the duration of a save, so the
disabled state is a state users will actually see. */
.modern-content button[disabled],
.modern-content input[type="button"][disabled],
.modern-content input[type="submit"][disabled] {
opacity: 0.4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Secondary — the prototype's .btn-save treatment.
Prefixed with body.modern-mode purely for weight: the generic rule
above matches input[type="button"] with !important, and an attribute
selector counts the same as a class, so a plain `.modern-content
.btn-save` would lose the tie and every button would render filled.
The extra class puts these rules decisively ahead. */
body.modern-mode .modern-content .btn-secondary,
body.modern-mode .modern-content .btn-save,
body.modern-mode .modern-content input[type="reset"] {
color: var(--text) !important;
background: var(--surface) !important;
border-color: var(--border-strong) !important;
box-shadow: none !important;
}
body.modern-mode .modern-content .btn-secondary:hover,
body.modern-mode .modern-content .btn-save:hover,
body.modern-mode .modern-content input[type="reset"]:hover {
color: var(--brand) !important;
background: var(--brand-50) !important;
border-color: var(--brand) !important;
}
/* Primary — the prototype's .btn-next treatment. */
body.modern-mode .modern-content .btn-next {
color: #fff !important;
background: var(--brand) !important;
border-color: var(--brand) !important;
}
body.modern-mode .modern-content .btn-next:hover {
color: #000 !important;
background: var(--brand-600) !important;
border-color: var(--brand-600) !important;
}
/* Tertiary — the prototype's .btn-back-step treatment. */
body.modern-mode .modern-content .btn-back-step {
color: var(--muted) !important;
background: var(--surface) !important;
border-color: var(--border) !important;
box-shadow: none !important;
}
body.modern-mode .modern-content .btn-back-step:hover {
color: var(--ink) !important;
background: var(--surface) !important;
border-color: var(--ink) !important;
}
/* Tables (report / results / generic) ------------------------------------ */
.modern-content table { border-collapse: collapse; width: 100%; }
.modern-content .Report,
.modern-content table.Report {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
font-size: var(--fs-base);
}
.modern-content .Report td,
.modern-content .Report th { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.modern-content .Report tr:last-child td { border-bottom: 0; }
.modern-content .reportheading,
.modern-content .Report th {
background: var(--bg-2) !important;
color: var(--ink) !important;
font-size: var(--fs-xs) !important;
font-weight: 800 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: left;
}
.modern-content .Report tbody tr:hover { background: var(--surface-soft); }
/* Attachment questions ---------------------------------------------------
modern-page.js keeps every authoritative legacy control and handler, then
presents each attachment question as its own compact Option 4 chooser.
Nothing here assumes attachments share a page or step. */
body.modern-mode .modern-content .modern-attachment {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin: 4px 0 8px;
font-size: var(--fs-base);
}
body.modern-mode .modern-content .modern-attachment-empty {
display: none;
padding: 11px 13px;
border: 1px solid var(--brand-100);
border-radius: var(--r);
background: var(--brand-50);
}
body.modern-mode .modern-content .modern-attachment.has-no-saved .modern-attachment-empty:not([hidden]) {
display: flex;
flex-direction: column;
gap: 2px;
}
body.modern-mode .modern-content .modern-attachment-empty strong {
color: var(--ink);
font-size: var(--fs-base);
}
body.modern-mode .modern-content .modern-attachment-empty span {
color: var(--ink);
font-size: var(--fs-sm);
}
body.modern-mode .modern-content .modern-attachment-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
/* Only one choice is offered when the account has no saved files left to
attach, so let it use the full width rather than sitting half-empty. */
body.modern-mode .modern-content .modern-attachment.has-no-saved .modern-attachment-choices {
grid-template-columns: minmax(0, 1fr);
}
body.modern-mode .modern-content button.modern-attachment-choice {
display: flex;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 9px 12px !important;
border: 1px solid var(--border-strong) !important;
border-radius: var(--r) !important;
color: var(--text) !important;
background: var(--surface) !important;
text-align: left;
box-shadow: none !important;
transition: border-color var(--t-fast), background var(--t-fast);
}
body.modern-mode .modern-content button.modern-attachment-choice:hover,
body.modern-mode .modern-content button.modern-attachment-choice[aria-expanded="true"] {
border-color: var(--brand) !important;
color: var(--ink) !important;
background: var(--brand-50) !important;
transform: none;
box-shadow: none !important;
}
body.modern-mode .modern-content button.modern-attachment-choice:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
body.modern-mode .modern-content .modern-attachment-choice-icon {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--brand-700);
background: var(--brand-50);
}
body.modern-mode .modern-content .modern-attachment-choice-icon svg {
width: 18px;
height: 18px;
}
body.modern-mode .modern-content .modern-attachment-choice-copy {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.modern-mode .modern-content .modern-attachment-choice-copy strong {
color: var(--ink);
font-size: var(--fs-base);
font-weight: 750;
}
body.modern-mode .modern-content .modern-attachment-choice-copy > span {
color: var(--muted);
font-size: var(--fs-xs);
}
body.modern-mode .modern-content .modern-attachment-panel {
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface-soft);
}
body.modern-mode .modern-content .modern-attachment-files {
display: flex;
flex-direction: column;
gap: 6px;
}
body.modern-mode .modern-content .modern-attachment-file {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 9px;
min-height: 52px;
padding: 8px 9px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
}
body.modern-mode .modern-content .modern-attachment-file-icon {
display: grid;
place-items: center;
width: 32px;
height: 36px;
border-radius: 6px;
color: var(--brand-700);
background: var(--brand-50);
font-size: 0.625rem;
font-weight: 800;
}
body.modern-mode .modern-content .modern-attachment-file-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
body.modern-mode .modern-content .modern-attachment-file-copy strong {
overflow: hidden;
color: var(--ink);
font-size: var(--fs-base);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
body.modern-mode .modern-content .modern-attachment-file-copy span {
overflow: hidden;
color: var(--muted);
font-size: var(--fs-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
body.modern-mode .modern-content button.modern-attachment-file-view,
body.modern-mode .modern-content button.modern-attachment-file-use {
min-height: 34px;
padding: 6px 11px;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 750;
}
body.modern-mode .modern-content button.modern-attachment-file-view {
border: 1px solid var(--border-strong) !important;
color: var(--text) !important;
background: var(--surface) !important;
}
body.modern-mode .modern-content button.modern-attachment-file-use {
border: 1px solid var(--brand) !important;
color: #fff !important;
background: var(--brand) !important;
}
body.modern-mode .modern-content button.modern-attachment-file-view,
body.modern-mode .modern-content button.modern-attachment-file-use {
padding: 6px 11px !important;
border-radius: 999px !important;
box-shadow: none !important;
transform: none;
}
body.modern-mode .modern-content button.modern-attachment-file-view:hover {
border-color: var(--ink) !important;
color: var(--ink) !important;
background: var(--surface) !important;
}
body.modern-mode .modern-content button.modern-attachment-file-use:hover {
border-color: var(--brand-600) !important;
color: var(--ink) !important;
background: var(--brand-600) !important;
}
body.modern-mode .modern-content button.modern-attachment-file-view:focus-visible,
body.modern-mode .modern-content button.modern-attachment-file-use:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
body.modern-mode .modern-content .modern-attachment-upload {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 9px 16px;
}
body.modern-mode .modern-content .modern-attachment-upload-copy {
display: flex;
flex-direction: column;
}
body.modern-mode .modern-content .modern-attachment-upload-copy strong {
color: var(--ink);
font-size: var(--fs-base);
}
body.modern-mode .modern-content .modern-attachment-upload-copy span {
color: var(--muted);
font-size: var(--fs-xs);
}
/* The real Plupload container carries raw legacy text nodes and
s.
Zeroing its font hides only those remnants; the browse control and live
progress span explicitly restore the type size. */
body.modern-mode .modern-content .modern-attachment-upload-controls {
display: flex;
align-items: center;
gap: 8px;
grid-column: 2;
grid-row: 1;
width: auto;
font-size: 0;
}
body.modern-mode .modern-content .modern-attachment-upload-controls br,
body.modern-mode .modern-content .modern-attachment-upload-controls input[type="checkbox"] {
display: none;
}
body.modern-mode .modern-content input.modern-attachment-browse {
min-height: 40px;
padding: 8px 16px !important;
border: 1px solid var(--brand) !important;
border-radius: 999px !important;
color: #fff !important;
background: var(--brand) !important;
font-size: var(--fs-base) !important;
font-weight: 750 !important;
box-shadow: none !important;
}
body.modern-mode .modern-content .modern-attachment-upload-controls [id^="filelist"] {
color: var(--muted);
font-size: var(--fs-xs);
}
body.modern-mode .modern-content .modern-attachment-save {
display: flex;
align-items: flex-start;
gap: 8px;
grid-column: 1 / -1;
color: var(--text);
font-size: var(--fs-sm);
}
body.modern-mode .modern-content .modern-attachment-save input {
display: inline-block !important;
flex: none;
width: 18px !important;
height: 18px;
margin: 1px 0 0 !important;
accent-color: var(--brand);
}
body.modern-mode .modern-content .modern-attachment-rules {
grid-column: 1 / -1;
margin: 0;
color: var(--muted);
font-size: var(--fs-xs);
}
body.modern-mode .modern-content .modern-attachment-status:empty { display: none; }
body.modern-mode .modern-content .modern-attachment-status {
grid-column: 1 / -1;
color: var(--success);
font-size: var(--fs-xs);
font-weight: 700;
}
body.modern-mode .modern-content .modern-attachment-selected-list {
display: flex;
flex-direction: column;
gap: 8px;
}
body.modern-mode .modern-content .modern-attachment-remaining {
margin: 0;
color: var(--muted);
font-size: var(--fs-xs);
}
body.modern-mode .modern-content .modern-attachment-selected {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 11px 12px;
border: 1px solid #b8d8c6;
border-radius: var(--r);
background: #edf7f1;
}
body.modern-mode .modern-content .modern-attachment-check {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
background: var(--success);
font-weight: 800;
}
body.modern-mode .modern-content .modern-attachment-selected-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
body.modern-mode .modern-content .modern-attachment-selected-copy strong {
overflow: hidden;
color: var(--ink);
font-size: var(--fs-sm);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
body.modern-mode .modern-content .modern-attachment-selected-name {
overflow: hidden;
color: var(--muted);
font-size: var(--fs-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
body.modern-mode .modern-content .modern-attachment-selected-actions {
display: flex;
gap: 6px;
}
body.modern-mode .modern-content input.modern-attachment-action,
body.modern-mode .modern-content button.modern-attachment-action {
min-height: 34px;
padding: 6px 11px !important;
border: 1px solid var(--border-strong) !important;
border-radius: 999px !important;
color: var(--text) !important;
background: var(--surface) !important;
font-size: var(--fs-xs) !important;
font-weight: 750 !important;
}
body.modern-mode .modern-content button.modern-attachment-action {
box-shadow: none !important;
cursor: pointer;
transform: none;
}
body.modern-mode .modern-content input.modern-attachment-action.is-remove,
body.modern-mode .modern-content button.modern-attachment-action.is-remove {
color: var(--brand) !important;
}
body.modern-mode .modern-content button.modern-attachment-action:hover {
background: var(--surface-soft) !important;
}
body.modern-mode .modern-content input.modern-attachment-action:focus-visible,
body.modern-mode .modern-content button.modern-attachment-action:focus-visible {
outline: 3px solid var(--ink) !important;
outline-offset: 2px !important;
}
/* Messages -------------------------------------------------------------- */
.modern-content .alert,
.modern-content .error,
.modern-content .message {
border-radius: var(--r);
padding: 12px 16px;
font-size: var(--fs-base);
border: 1px solid var(--border-strong);
background: var(--surface-soft);
margin-bottom: 16px;
}
.modern-content .alert-success { background: #EAF6EF; border-color: #BFE2CD; color: var(--success); }
.modern-content .alert-danger,
.modern-content .error { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
/* Server-managed maintenance notices are emitted immediately before the page
content. Keep their text untouched while presenting them as a first-class
product notification rather than an inline red legacy message. */
body.modern-mode .maintenance-notice {
box-sizing: border-box;
max-width: calc(var(--shell) - var(--pad-x) * 2);
margin: 24px auto 0;
padding: 14px 18px;
color: var(--brand-700);
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-left: 4px solid var(--brand);
border-radius: var(--r);
font-size: var(--fs-base);
font-weight: 600;
line-height: var(--lh-body);
text-align: left;
}
body.modern-mode .maintenance-notice a {
color: var(--brand);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Neutralise legacy chrome that would clash with the modern shell -------- */
body.modern-mode #brs_header,
body.modern-mode #brs_footer,
body.modern-mode #brs_customheader,
body.modern-mode #brs_customfooter { display: none !important; }
body.modern-mode #brs_mainContent { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; width: auto; }
/* Flatten the legacy Bootstrap grid inside the modern card so content isn't
double-indented by the col- and offset- wrappers. */
body.modern-mode .modern-content .container,
body.modern-mode .modern-content .container-fluid { padding-left: 0; padding-right: 0; max-width: none; width: auto; }
body.modern-mode .modern-content .row { margin-left: 0; margin-right: 0; }
body.modern-mode .modern-content [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
body.modern-mode .modern-content [class*="offset-"] { margin-left: 0 !important; }
/* Legacy "highlighted" intro band → modern lead paragraph.
The legacy rule is `div.highlighted p { font-size: 19pt !important }`, so
matching !important here is the only way to bring it onto the scale. */
body.modern-mode .modern-content .highlighted {
background: var(--surface-soft);
min-height: 0;
border-left: 4px solid var(--brand);
border-radius: var(--r);
padding: 16px 20px !important;
margin: 0 0 22px;
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--text);
}
body.modern-mode .modern-content .highlighted p {
font-size: var(--fs-base) !important;
line-height: var(--lh-body);
margin-bottom: 0;
}
body.modern-mode .modern-content .highlighted p + p { margin-top: 1em; }
/* Page title. Uses the same clamp as the search page's h1 so headings line
up in size across the whole site. */
body.modern-mode .modern-content .heading1 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); }
/* Primary-navigation content pages --------------------------------------
These CMS pages contain short, structured copy. The general 75ch measure
leaves a conspicuous empty column, while their legacy Bootstrap utilities
add generous spacing inside the modern card. Use the available card width
and the same compact type rhythm as the rest of the modern site. */
body.modern-mode .modern-page.is-content-page .modern-content #brs_mainContent {
font-family: inherit;
}
body.modern-mode .modern-page.is-content-page .modern-content p,
body.modern-mode .modern-page.is-content-page .modern-content ol,
body.modern-mode .modern-page.is-content-page .modern-content ul,
body.modern-mode .modern-page.is-content-page .modern-content h2,
body.modern-mode .modern-page.is-content-page .modern-content h3,
body.modern-mode .modern-page.is-content-page .modern-content h4 {
max-width: none;
}
body.modern-mode .modern-page.is-content-page .modern-content p,
body.modern-mode .modern-page.is-content-page .modern-content li,
body.modern-mode .modern-page.is-content-page .modern-content h1,
body.modern-mode .modern-page.is-content-page .modern-content h2,
body.modern-mode .modern-page.is-content-page .modern-content h3,
body.modern-mode .modern-page.is-content-page .modern-content h4,
body.modern-mode .modern-page.is-content-page .modern-content h5,
body.modern-mode .modern-page.is-content-page .modern-content h6,
body.modern-mode .modern-page.is-content-page .modern-content label,
body.modern-mode .modern-page.is-content-page .modern-content input,
body.modern-mode .modern-page.is-content-page .modern-content select,
body.modern-mode .modern-page.is-content-page .modern-content textarea {
font-family: inherit !important;
}
/* CMS rich-text editors can leave inline font faces and point sizes on spans.
They fragment otherwise uniform paragraphs (for example, 16pt text embedded
inside 15px body copy). Let structural elements define the modern type
scale, while inline phrasing elements inherit it. Bold and italics remain. */
body.modern-mode .modern-page.is-content-page .modern-content span,
body.modern-mode .modern-page.is-content-page .modern-content font {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit;
}
/* A few CMS pages use a 24pt span as a section label instead of a heading
element. Preserve that hierarchy on the shared modern scale rather than
either displaying the arbitrary point size or flattening it to body copy. */
body.modern-mode .modern-page.is-content-page .modern-content span[style*="font-size: 24pt"] {
font-size: var(--fs-xl) !important;
}
body.modern-mode .modern-page.is-content-page #brs_mainContent > .row:first-child {
padding-top: 0 !important;
padding-bottom: 18px !important;
}
body.modern-mode .modern-page.is-content-page .modern-content .highlighted {
margin-bottom: 18px;
}
body.modern-mode .modern-page.is-content-page #brs_mainContent > .row:not(.highlighted) > [class*="col-"] {
padding-top: 0 !important;
}
body.modern-mode .modern-page.is-content-page #brs_mainContent > .grid {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.modern-mode .modern-page.is-content-page .modern-content h6 {
font-size: var(--fs-xl);
margin: 0 0 12px;
}
body.modern-mode .modern-page.is-content-page .modern-content ol {
padding-left: 1.4em;
}
/* Contact ---------------------------------------------------------------
The introductory copy is CMS-managed, but help-contact.php owns the form
markup. Keep that local form on the same field, label and spacing system as
sign-in and application pages instead of inheriting Bootstrap's full-width
legacy controls. */
body.modern-mode .modern-page.is-contact-page #contact_form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
width: 100%;
max-width: 760px;
margin: 8px 0 0;
padding: clamp(20px, 3vw, 28px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface-soft);
}
body.modern-mode .modern-page.is-contact-page #contact_form .form-group {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
body.modern-mode .modern-page.is-contact-page #contact_form label {
display: block;
margin: 0 0 7px;
color: var(--ink) !important;
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1.35;
}
body.modern-mode .modern-page.is-contact-page #contact_form label span {
color: var(--muted);
font-size: inherit !important;
font-weight: 500;
}
body.modern-mode .modern-page.is-contact-page #contact_form .form-control {
box-sizing: border-box;
display: block;
width: 100% !important;
max-width: none !important;
min-height: 48px;
margin: 0 !important;
padding: 11px 14px !important;
color: var(--ink) !important;
background: var(--surface) !important;
border: 1px solid var(--border-strong) !important;
border-radius: var(--r) !important;
box-shadow: none !important;
}
body.modern-mode .modern-page.is-contact-page #contact_form textarea.form-control {
min-height: 140px;
resize: vertical;
}
body.modern-mode .modern-page.is-contact-page #contact_form .form-control:hover {
border-color: var(--muted) !important;
}
body.modern-mode .modern-page.is-contact-page #contact_form .form-control:focus {
background: #fff !important;
border-color: var(--brand) !important;
box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
body.modern-mode .modern-page.is-contact-page #response {
min-height: 0;
margin: 0 0 12px !important;
color: var(--success) !important;
font-size: var(--fs-sm);
}
body.modern-mode .modern-page.is-contact-page #response:empty {
display: none;
}
body.modern-mode .modern-page.is-contact-page #contact_form #contactSubmit {
min-width: 118px;
min-height: 44px;
}
/* Legal destinations use the full modern content card. Their CMS structure
already supplies short paragraphs and section breaks; the former 920px cap
left a large, unused white column on desktop. */
body.modern-mode .modern-page.is-legal-page .modern-content #brs_mainContent {
width: 100%;
max-width: none;
}
/* CMS images without an authored display width should render at their
intrinsic size and only shrink when the content column is narrower. This
prevents low-resolution assets being enlarged and blurred on wide screens.
Explicit CMS width attributes are preserved. */
body.modern-mode .modern-page.is-content-page .modern-content img:not([width]) {
width: auto !important;
max-width: 100% !important;
height: auto;
}
/* CMS body banners are followed by another full-width content column. The
compact column reset removes Bootstrap's original 24px top padding from
that column, so preserve the same deliberate image-to-copy gap here. */
body.modern-mode .modern-page.is-content-page #brs_mainContent .header-wrapper,
body.modern-mode .modern-page.is-content-page #brs_mainContent .header-wrapper-mob {
margin-bottom: 24px;
}
/* Our People ------------------------------------------------------------
This retired-from-navigation CMS route remains directly reachable. Its
legacy carousel positioned the next arrow almost a full column outside the
video, which forced a 2395px document on a 1440px viewport after the shared
grid reset. Keep the content and carousel behaviour, but give the route the
same contained, responsive card treatment as the rest of the redesign. */
body.modern-mode .modern-page.is-people-page #brs_mainContent,
body.modern-mode .modern-page.is-people-profile #brs_mainContent {
width: 100%;
max-width: none;
}
body.modern-mode .modern-page.is-people-page #brs_mainContent > .row,
body.modern-mode .modern-page.is-people-profile #brs_mainContent > .row {
margin-right: 0;
margin-left: 0;
}
body.modern-mode .modern-page.is-people-page .people-video-main {
overflow: hidden;
border-radius: var(--r-lg) 0 0 var(--r-lg);
background: var(--ink);
}
body.modern-mode .modern-page.is-people-page .video-caption {
color: #fff;
background: var(--brand-700);
border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-prev,
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-next {
width: 48px;
}
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-prev {
left: 0;
}
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-next {
right: 0;
}
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-prev-icon,
body.modern-mode .modern-page.is-people-page .people-video-main .carousel-control-next-icon {
filter: brightness(0) invert(1);
}
body.modern-mode .modern-page.is-people-page .people-grid {
margin-right: 0;
}
body.modern-mode .modern-page.is-people-page .people-grid .item {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--sh-1);
}
body.modern-mode .modern-page.is-people-page .people-grid .item .caption {
min-height: 0;
padding: 14px 16px;
color: var(--text);
background: var(--surface-soft);
background-image: none;
}
body.modern-mode .modern-page.is-people-page .people-grid .item .title,
body.modern-mode .modern-page.is-people-page .people-grid .item .name {
color: var(--text);
overflow-wrap: anywhere;
}
@media (min-width: 1200px) {
body.modern-mode .modern-page.is-people-page .people-video-main {
flex: 0 0 58.333333%;
width: 58.333333%;
max-width: 58.333333%;
}
body.modern-mode .modern-page.is-people-page .video-caption {
flex: 0 0 41.666667%;
width: 41.666667%;
max-width: 41.666667%;
}
}
@media (max-width: 1199px) {
body.modern-mode .modern-page.is-people-page .people-video-main,
body.modern-mode .modern-page.is-people-page .video-caption {
border-radius: var(--r-lg);
}
}
/* Six reasons -----------------------------------------------------------
The CMS supplies each reason as two Bootstrap columns. The general legacy
grid reset above intentionally flattens columns for ordinary prose pages,
but here it enlarged 656px images to nearly 1200px and stacked them above
their copy. Restore the production page's 1142px content measure and its
original Bootstrap column spacing: 24px beside the image plus 15px inside
the text column. Images remain below their native width for a crisp result. */
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid {
width: 100%;
max-width: 1142px;
margin-right: auto !important;
margin-left: auto !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
margin-bottom: 48px;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row > [class*="col-"] {
flex: 0 0 50%;
min-width: 0;
width: 50%;
max-width: 50%;
margin-top: 0 !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.odd > div:first-child {
padding: 0 24px 16px 0 !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.odd > div:last-child {
padding: 0 15px 16px !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.even > div:first-child {
padding: 0 0 16px 24px !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.even > div:last-child {
padding: 0 15px 16px !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.even > .order-sm-first {
order: -1;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row img {
display: block;
border-radius: var(--r);
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row h2 {
margin-top: 0;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > p {
display: none;
}
@media (max-width: 720px) {
.modern-page { padding: 24px 18px 52px; }
.modern-content { padding: 18px 16px; }
body.modern-mode .modern-content table.legacy-form-table > tbody > tr.legacy-form-row {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 9px 0;
}
body.modern-mode .modern-content .legacy-form-label {
padding-top: 0 !important;
}
body.modern-mode .modern-content .legacy-form-unlabelled > td:first-child:empty {
display: none !important;
}
body.modern-mode .modern-content .legacy-form-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body.modern-mode .modern-content .legacy-form-table select,
body.modern-mode .modern-content .legacy-form-table textarea {
max-width: none !important;
}
body.modern-mode .modern-content .legacy-form-actions .legacy-form-field {
align-items: stretch;
}
body.modern-mode .modern-content .legacy-form-actions input[type="button"],
body.modern-mode .modern-content .legacy-form-actions input[type="submit"],
body.modern-mode .modern-content .legacy-form-actions input[type="reset"],
body.modern-mode .modern-content .legacy-form-actions button {
width: 100%;
min-height: 44px;
}
body.modern-mode .modern-page.is-auth {
padding-right: 14px;
padding-left: 14px;
}
body.modern-mode .modern-page.is-auth .modern-content {
padding: 22px 18px;
}
body.modern-mode .modern-content fieldset {
padding: 16px 14px;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row {
flex-direction: column;
gap: 18px;
margin-bottom: 32px;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row > [class*="col-"] {
flex: 0 0 auto;
width: 100%;
max-width: none;
padding: 0 !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.odd > div:first-child,
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.odd > div:last-child,
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.even > div:first-child,
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row.even > div:last-child {
padding: 0 !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row > div:first-child {
order: 0 !important;
}
body.modern-mode .modern-page.is-six-reasons #brs_mainContent > .grid > .row > div:last-child {
order: 1 !important;
}
/* Legacy CMS and report tables are built for desktop widths. Let them scroll
inside the content column instead of forcing the whole page sideways. */
.modern-content table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Long unbroken URLs in CMS copy are another common cause of sideways scroll. */
.modern-content p,
.modern-content li,
.modern-content a { overflow-wrap: anywhere; }
}
/* ═══════════════════════════════════════════════════════════════════
ADVERT DETAIL PAGE (pageID 160)
Reproduces the prototype's detail layout: a back band, a sticky action
bar, and a full-bleed white column for the advert body.
The action bar's buttons are the LEGACY nodes,
relocated here by js/modern-page.js. Each one rewrites its own
className on hover (applyBtn → applyBtn-hover), so every rule below
lists BOTH names — styling only the base class would make the button
lose its appearance the moment the pointer touched it.
═══════════════════════════════════════════════════════════════════ */
.modern-page.is-advert {
/* The band, bar and body run to their own edges, like the prototype. */
max-width: none;
padding: 0 0 70px;
}
.detail-band {
background: linear-gradient(180deg, #FBF5EB 0%, var(--bg) 100%);
padding: 18px var(--pad-x);
}
.detail-band-inner,
.detail-actions-inner {
max-width: 920px;
margin: 0 auto;
}
.detail-actions-inner {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.detail-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
cursor: pointer;
padding: 6px 0;
transition: color var(--t-fast), gap var(--t-fast);
}
.detail-back:hover { color: var(--brand); gap: 10px; }
.detail-back:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: var(--r-sm);
}
.detail-actions {
padding: 14px var(--pad-x);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
/* Sits directly beneath the sticky site header. --header-h is published
by modern-page.js; the fallback matches the desktop header. */
position: sticky;
top: var(--header-h, 104px);
z-index: 10;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* The advert body: a white column matching the prototype's measure. */
.modern-page.is-advert .modern-content {
max-width: 920px;
margin: 0 auto;
padding: 36px clamp(20px, 4vw, 48px) 48px;
border: 1px solid var(--border);
border-top: 0;
border-radius: 0;
box-shadow: none;
}
/* The legacy advert template supplies its own Helvetica-based styles after
this stylesheet. These deliberately more-specific rules map its existing
content onto the prototype without changing tenant-authored copy. */
.modern-page.is-advert .advert-modern,
.modern-page.is-advert .advert-modern .aBody,
.modern-page.is-advert .advert-modern .aText {
width: auto;
margin: 0;
padding: 0;
}
.modern-page.is-advert .advert-modern .aJobTitle[hidden] { display: none !important; }
.modern-page.is-advert .advert-modern .advert-title {
margin: 0 0 18px;
color: var(--ink);
font-family: inherit;
font-size: clamp(1.625rem, 3.5vw, 2.25rem);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.1;
}
.modern-page.is-advert .advert-modern .detail-meta {
margin: 0 0 28px;
padding: 16px 20px;
color: var(--text);
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--r);
font-family: inherit;
font-size: var(--fs-base);
line-height: 2;
}
.modern-page.is-advert .advert-modern .detail-meta b,
.modern-page.is-advert .advert-modern .detail-meta strong {
color: var(--ink);
font-weight: 700;
}
.modern-page.is-advert .advert-modern .aText .close-date {
margin: 18px 0;
padding: 12px 16px;
color: var(--brand);
background: #FFF0EB;
border: 1px solid #FBC0A8;
border-radius: var(--r);
font-size: var(--fs-base);
font-weight: 600;
}
.modern-page.is-advert .advert-modern .aText .close-date b,
.modern-page.is-advert .advert-modern .aText .close-date strong {
color: var(--brand);
font-weight: 800;
}
.modern-page.is-advert .advert-modern .aText .flexibility-statement {
margin: 22px 0;
padding: 16px 20px;
color: var(--text);
background: var(--surface-soft);
border-left: 4px solid var(--brand);
border-radius: var(--r);
font-size: 16px;
line-height: var(--lh-body);
}
.modern-page.is-advert .advert-modern .aText .flexibility-statement b,
.modern-page.is-advert .advert-modern .aText .flexibility-statement strong {
display: block;
margin-bottom: 4px;
color: var(--ink);
font-size: var(--fs-lg);
font-weight: 800;
}
/* The report table is layout-only. Removing its intrinsic sizing lets the
advert fill the same 920px content column as the prototype. */
.modern-page.is-advert #report > table.advert-layout-table,
.modern-page.is-advert #report > table.advert-layout-table > tbody,
.modern-page.is-advert #report > table.advert-layout-table > tbody > tr,
.modern-page.is-advert #report > table.advert-layout-table > tbody > tr > td {
display: block;
width: 100%;
}
/* ── Relocated legacy action buttons ─────────────────────────────── */
body.modern-mode .modern-page.is-advert .detail-actions input[type="button"],
body.modern-mode .modern-page.is-advert .detail-actions button {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px !important;
font-family: 'South Australia Sans', Arial, Helvetica, sans-serif !important;
font-size: var(--fs-base) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.1px !important;
text-transform: none !important;
padding: 10px 18px !important;
border-radius: 999px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
cursor: pointer;
transition: border-color var(--t-fast), color var(--t-fast),
background var(--t-fast), transform var(--t-fast);
}
body.modern-mode .modern-page.is-advert .detail-actions input[type="button"]:hover,
body.modern-mode .modern-page.is-advert .detail-actions button:hover {
border-color: var(--ink) !important;
background: var(--surface) !important;
color: var(--ink) !important;
transform: translateY(-1px);
}
body.modern-mode .modern-page.is-advert .detail-actions input[type="button"]:focus-visible,
body.modern-mode .modern-page.is-advert .detail-actions button:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Apply is the primary action. data-primary is set by modern-page.js and —
unlike a class — survives the button rewriting its own className.
The selector MUST name the element type as well as the attribute.
An attribute selector scores the same as a class, so the obvious
`.detail-actions [data-primary]` is (0,2,0) and LOSES to the base rule
`.detail-actions input[type="button"]` at (0,2,1) — the type selector
is the tie-breaker. The primary button then rendered identically to the
secondary ones at rest and only turned brand on :hover, because the
base :hover rule happens not to set a background.
Verified in Chrome: resting background was rgb(255,255,255) with
rgb(42,36,30) text before this rule; see browser-verify.js section I,
which now asserts the resting appearance rather than only the hover. */
body.modern-mode .modern-page.is-advert .detail-actions input[type="button"][data-primary],
body.modern-mode .modern-page.is-advert .detail-actions input[type="submit"][data-primary],
body.modern-mode .modern-page.is-advert .detail-actions button[data-primary],
body.modern-mode .modern-page.is-advert .detail-actions [data-primary] {
background: var(--brand) !important;
color: #fff !important;
border-color: var(--brand) !important;
box-shadow: 0 8px 20px -10px rgba(225, 84, 62, 0.55);
}
body.modern-mode .modern-page.is-advert .detail-actions input[type="button"][data-primary]:hover,
body.modern-mode .modern-page.is-advert .detail-actions input[type="submit"][data-primary]:hover,
body.modern-mode .modern-page.is-advert .detail-actions button[data-primary]:hover,
body.modern-mode .modern-page.is-advert .detail-actions [data-primary]:hover {
background: var(--brand-600) !important;
border-color: var(--brand-600) !important;
color: #000 !important;
}
/* Apply page: just the prototype's "Back to job" link above the card. The
page keeps the standard shell width, so the band is flush, not full-bleed. */
.modern-page.is-apply .detail-band {
background: none;
padding: 0 0 14px;
}
@media (max-width: 720px) {
.modern-page.is-advert .modern-content {
padding: 22px 16px 32px;
border-left: 0;
border-right: 0;
}
.detail-actions { padding: 12px 16px; }
.detail-band { padding: 14px 16px; }
/* Four pills wrap awkwardly on narrow screens; let them share the row. */
.detail-actions input[type="button"],
.detail-actions button { flex: 1 1 auto; }
.modern-page.is-advert .advert-modern .detail-meta { padding: 14px 16px; }
}
/* The action bar sticks; honour users who don't want motion-linked UI. */
@media (prefers-reduced-motion: reduce) {
.detail-actions input[type="button"]:hover,
.detail-actions button:hover { transform: none; }
.detail-back:hover { gap: 6px; }
}
/* ======================================================================
APPLY PAGE - PROTOTYPE LAYOUT (pageID 268 and the later steps)
modern-page.js rewrites the server's