per value, the closing line last, no centring or stray breaks (copy before:
backups/manual/careers-cms-20261007-tidy.csv). An editor who departs from it gets plain
readable text, not a broken grid: everything not named here spans the row.
The CMS has no wrapper per value, so the columns come from `order`: every name sorts before
every sentence, and the grid fills a row of names, then a row of sentences under them. The
DOM order — name, sentence, name … — is untouched, and it is what screen readers follow.
⚠ Built for four values (two rows of two below 1024px); a fifth would need its own step. */
.content-block .table-block {
--nv-col-gap: clamp(24px, 2.5vw, 32px);
--nv-section: clamp(48px, 6vw, 80px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--nv-col-gap);
align-items: start;
}
.content-block .table-block > * {
grid-column: 1 / -1;
}
/* The same heading as .nv-careers-list__title: one size for every section on the page. */
.content-block .table-block > h2 {
margin: var(--nv-section) 0 var(--ds-sec-below);
color: var(--ds-ink);
font-size: var(--ds-sec-size);
line-height: var(--ds-sec-lh);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
text-wrap: balance;
}
.content-block .table-block > h2 ~ p {
max-width: 68ch;
margin: 0;
color: var(--ds-ink);
font-size: 17px;
line-height: 1.65;
text-align: left;
}
/* Under the list, whose own bottom margin already holds part of the section gap. */
.content-block .table-block > .nv-careers-list + h2 {
margin-top: calc(var(--nv-section) - var(--ds-s-8));
}
/* The page's opening paragraph is its lead, as on the vacancy page. */
.content-block .table-block > h2:first-of-type + p {
font-size: clamp(19px, 1.7vw, 22px);
line-height: 1.5;
}
/* dark-theme.css sets every CMS paragraph to `color: inherit` at (0,3,1), which would dim the
lead to the values' grey and flatten the one contrast step between them. */
:root[data-theme="dark"] .content-block .table-block > h2:first-of-type + p {
color: var(--ds-ink);
}
/* A value: a column under a rule, its name, then its sentence. */
.content-block .table-block > h3 {
grid-column: auto;
order: 1;
margin: 0;
padding-top: var(--ds-s-5);
border-top: 2px solid var(--ds-ink);
color: var(--ds-ink);
font-size: 17px;
line-height: 1.3;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.content-block .table-block > h3 + p {
grid-column: auto;
order: 2;
max-width: none;
margin: var(--ds-s-3) 0 0;
color: var(--ds-ink-2);
font-size: 16px;
line-height: 1.6;
}
/* Whatever follows the values stays after them. */
.content-block .table-block > h3 ~ :not(h3, h3 + p) {
order: 3;
}
/* The closing line spans the page under a hairline, in one colour. */
.content-block .table-block > p:last-child:has(> strong) {
grid-column: 1 / -1;
max-width: none;
margin-top: var(--nv-section);
padding-top: var(--ds-s-7);
border-top: 1px solid var(--ds-line-strong);
color: var(--ds-ink);
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.35;
letter-spacing: .04em;
text-transform: uppercase;
}
.content-block .table-block > p:last-child > strong,
:root[data-theme="dark"] .content-block .table-block > p:last-child > strong {
color: var(--ds-ink);
font-weight: 700;
}
/* Each line its own block, so a narrow screen balances it instead of leaving one word on a
line of its own (balance does not reach across a
); the
itself would then add an
empty line. */
.content-block .table-block > p:last-child:has(> strong) > strong {
display: block;
text-wrap: balance;
}
.content-block .table-block > p:last-child:has(> strong) > br {
display: none;
}
/* Two columns: names 1–2 over their sentences, then names 3–4 over theirs. */
@media (max-width: 1023px) {
.content-block .table-block {
--nv-section: clamp(40px, 8vw, 56px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-block .table-block > h3:nth-of-type(n + 3) {
order: 3;
margin-top: var(--ds-s-8);
}
.content-block .table-block > h3:nth-of-type(n + 3) + p {
order: 4;
}
.content-block .table-block > h3 ~ :not(h3, h3 + p) {
order: 5;
}
}
/* One column: back to the text's own order. */
@media (max-width: 767px) {
.content-block .table-block {
grid-template-columns: minmax(0, 1fr);
}
.content-block .table-block > h3,
.content-block .table-block > h3 + p,
.content-block .table-block > h3:nth-of-type(n + 3),
.content-block .table-block > h3:nth-of-type(n + 3) + p,
.content-block .table-block > h3 ~ :not(h3, h3 + p) {
order: 0;
}
.content-block .table-block > h3:nth-of-type(n + 2) {
margin-top: var(--ds-s-7);
}
.content-block .table-block > h2 ~ p {
font-size: 16px;
}
}
/* ================================================================ the vacancy page */
.nv-vacancy {
padding: var(--ds-s-6) 0 var(--ds-s-9);
}
.nv-vacancy__back {
display: inline-flex;
align-items: center;
gap: var(--ds-s-2);
min-height: 44px;
margin-bottom: var(--ds-s-4);
color: var(--ds-ink-2);
font-size: var(--ds-t-small);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-vacancy__back svg {
transform: translateY(var(--ds-optical));
transition: transform var(--ds-d-micro) var(--ds-e-enter);
}
.nv-vacancy__back:hover {
color: var(--ds-ink);
}
@media (hover: hover) and (pointer: fine) {
.nv-vacancy__back:hover svg {
transform: translate(-3px, var(--ds-optical));
}
}
.nv-vacancy__back:focus-visible {
outline: 2px solid var(--ds-ink);
outline-offset: 2px;
}
/* ---------------------------------------------------------------- the dark plate */
.nv-vhero {
position: relative;
overflow: hidden;
display: grid;
gap: clamp(32px, 5vw, 72px);
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(24px, 3.5vw, 44px);
background: var(--nv-plate);
box-shadow: inset 0 0 0 1px var(--nv-plate-line);
color: var(--nv-plate-ink);
}
.nv-vhero__mark {
position: absolute;
top: 50%;
right: -3%;
width: min(44%, 540px);
height: auto;
color: #FFFFFF;
opacity: .055;
transform: translateY(-46%);
pointer-events: none;
}
.nv-vhero__title {
position: relative;
max-width: min(24ch, 80%);
margin: 0;
color: inherit;
font-size: clamp(34px, 5.2vw, 68px);
line-height: 1;
font-weight: 700;
letter-spacing: -.01em;
text-transform: uppercase;
text-wrap: balance;
overflow-wrap: anywhere;
}
.nv-vhero__foot {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--ds-s-6) var(--ds-s-8);
padding-top: clamp(20px, 2.6vw, 28px);
border-top: 1px solid rgba(255, 255, 255, .12);
}
.nv-vhero__facts {
display: flex;
flex-wrap: wrap;
gap: var(--ds-s-6) clamp(28px, 4.5vw, 64px);
margin: 0;
}
.nv-vhero__fact {
display: grid;
gap: 6px;
}
.nv-vhero__fact dt {
color: var(--nv-plate-ink-2);
font-size: var(--ds-t-small);
line-height: 1.3;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.nv-vhero__fact dd {
margin: 0;
color: var(--nv-plate-ink);
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
/* The page's call to action: the site's yellow button, larger, with an arrow that says where
it goes — down to the form on this page, or on to sending it.
Hover INVERTS it — ink fill, yellow label, the yellow kept as a frame — and the arrow hands
over to the next one, the same gesture as the vacancy row. The primitive's own hover (yellow
to a 10% darker yellow) read as no hover at all (owner, 2026-10-06). The frame is there from
the start, yellow on yellow, so the state change moves nothing; on the dark plate it is what
keeps the inverted button visible. */
.nv-btn.nv-cta {
gap: 14px;
min-height: 56px;
padding: 0 26px;
border: 2px solid var(--ds-yellow);
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: background-color var(--ds-d-state) var(--ds-e-enter), color var(--ds-d-state) var(--ds-e-enter),
transform var(--ds-d-micro) var(--ds-e-exit);
}
.nv-cta__icon {
display: grid;
flex: none;
width: 18px;
height: 18px;
overflow: hidden;
}
.nv-cta__arrow {
grid-area: 1 / 1;
transition: transform 300ms var(--ds-e-enter);
}
.nv-cta__arrow--next {
transform: translateX(-150%);
}
.nv-cta--down .nv-cta__arrow--next {
transform: translateY(-150%);
}
@media (hover: hover) and (pointer: fine) {
.nv-btn.nv-cta:not([disabled]):hover {
background: var(--ds-ink-brand);
color: var(--ds-yellow);
}
.nv-btn.nv-cta:not([disabled]):hover .nv-cta__arrow {
transform: translateX(150%);
}
.nv-btn.nv-cta.nv-cta--down:not([disabled]):hover .nv-cta__arrow {
transform: translateY(150%);
}
.nv-btn.nv-cta:not([disabled]):hover .nv-cta__arrow--next,
.nv-btn.nv-cta.nv-cta--down:not([disabled]):hover .nv-cta__arrow--next {
transform: none;
}
}
.nv-btn.nv-cta:not([disabled]):active {
transform: scale(.98);
}
/* The primitive's outline is the brand ink, which vanishes on a dark plate and in the dark theme. */
.nv-btn.nv-cta:focus-visible {
outline: 2px solid var(--ds-ink);
outline-offset: 3px;
}
.nv-vhero .nv-btn.nv-cta:focus-visible {
outline-color: var(--nv-plate-ink);
}
/* ---------------------------------------------------------------- sections: rail + text */
.nv-vdesc {
margin-top: clamp(40px, 6vw, 88px);
}
.nv-vsec {
display: grid;
grid-template-columns: var(--nv-rail) minmax(0, 760px);
column-gap: var(--nv-gap);
align-items: start;
}
.nv-vsec + .nv-vsec {
margin-top: clamp(40px, 5vw, 64px);
}
/* The heading travels with its section while the section is on screen, and stops at its end. */
.nv-vsec__head {
position: sticky;
top: var(--ds-s-7);
}
.nv-vsec__title {
margin: 0;
color: var(--ds-ink);
font-size: var(--ds-t-h3);
line-height: 1.3;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
text-wrap: balance;
}
/* ---------------------------------------------------------------- the description's type */
.nv-prose {
max-width: 68ch;
color: var(--ds-ink);
font-size: 17px;
line-height: 1.65;
overflow-wrap: break-word;
}
.nv-prose > * {
margin: 0;
}
.nv-prose > * + * {
margin-top: 1em;
}
.nv-prose > ul + p,
.nv-prose > ol + p {
margin-top: 1.4em;
}
/* The opening paragraph of the opening section is the lead. */
.nv-vdesc > .nv-vsec:first-child .nv-prose > p:first-child {
font-size: clamp(19px, 1.7vw, 22px);
line-height: 1.5;
}
.nv-prose strong,
.nv-prose b {
font-weight: 700;
}
.nv-prose a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--ds-ink-3);
text-underline-offset: 3px;
transition: text-decoration-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-prose a:hover {
text-decoration-color: currentColor;
}
.nv-prose ul,
.nv-prose ol {
display: grid;
gap: 10px;
padding: 0;
list-style: none;
}
.nv-prose li {
position: relative;
margin: 0;
padding-left: 26px;
}
/* A square, the site's own mark, centred on the first line's x-height. */
.nv-prose ul > li::before {
content: "";
position: absolute;
top: calc(.825em - 3px);
left: 2px;
width: 6px;
height: 6px;
background: var(--ds-ink);
}
.nv-prose ol {
counter-reset: nv-ol;
}
.nv-prose ol > li {
counter-increment: nv-ol;
padding-left: 30px;
}
.nv-prose ol > li::before {
content: counter(nv-ol) ".";
position: absolute;
top: 0;
left: 0;
color: var(--ds-ink-2);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.nv-prose li > ul,
.nv-prose li > ol {
margin-top: 10px;
}
.nv-prose h2,
.nv-prose h3,
.nv-prose h4,
.nv-prose h5,
.nv-prose h6 {
color: var(--ds-ink);
font-size: 17px;
line-height: 1.4;
font-weight: 700;
}
.nv-prose blockquote {
padding-left: var(--ds-s-6);
border-left: 1px solid var(--ds-ink-3);
color: var(--ds-ink-2);
}
.nv-prose hr {
height: 0;
border: 0;
border-top: 1px solid var(--ds-line-strong);
}
.nv-prose code,
.nv-prose pre {
font-size: .9em;
}
.nv-prose table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.nv-prose th,
.nv-prose td {
padding: var(--ds-s-2) var(--ds-s-4) var(--ds-s-2) 0;
border-bottom: 1px solid var(--ds-line-strong);
text-align: left;
vertical-align: top;
}
/* ---------------------------------------------------------------- the form: the card plate */
.nv-apply {
scroll-margin-top: var(--ds-s-6);
margin-top: clamp(56px, 8vw, 112px);
padding: var(--nv-pad);
background: var(--ds-card);
border: 1px solid var(--ds-line);
/* The plate's border and padding come out of the rail, so the fields start on the same line
as the description's text above. */
grid-template-columns: calc(var(--nv-rail) - var(--nv-pad) - 1px) minmax(0, 760px);
}
.nv-apply:focus {
outline: none; /* focused only as the "Apply" link's landing point, see careers.js */
}
.nv-apply [hidden] {
display: none !important;
}
.nv-apply__intro,
.nv-apply__off {
margin: var(--ds-s-4) 0 0;
color: var(--ds-ink-2);
font-size: 14px;
line-height: 1.5;
}
.nv-apply__off {
margin: 0;
color: var(--ds-ink);
font-size: 17px;
}
.nv-apply__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-s-6) var(--ds-s-6);
}
.nv-field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.nv-field--wide {
grid-column: 1 / -1;
}
.nv-field__label {
display: block;
margin: 0 0 var(--ds-s-2);
padding: 0;
color: var(--ds-ink);
font-size: var(--ds-t-small);
line-height: 1.3;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.nv-field__req {
color: var(--ds-alert);
}
/* text inputs and the select */
.nv-control {
position: relative;
display: block;
}
.nv-input {
display: block;
width: 100%;
height: 52px;
padding: 0 var(--ds-s-5);
background: var(--nv-field);
border: 1px solid var(--ds-line-strong);
border-radius: 0;
color: var(--ds-ink);
caret-color: var(--ds-ink);
font: inherit;
font-size: 16px; /* 16px keeps iOS Safari from zooming into the field */
-webkit-appearance: none;
appearance: none;
transition: border-color var(--ds-d-micro) var(--ds-e-enter), background-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-input::placeholder {
color: var(--ds-ink-3);
}
.nv-input:hover {
border-color: var(--ds-ink-3);
}
.nv-input:focus {
outline: none;
background: var(--nv-field-focus);
border-color: var(--ds-ink);
}
/* The focus underline grows from where the eye starts reading the field. */
.nv-control__line {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background: var(--nv-focus-line);
transform: scaleX(0);
transform-origin: left center;
transition: transform 160ms var(--ds-e-exit);
pointer-events: none;
}
.nv-input:focus + .nv-control__line {
transform: scaleX(1);
transition: transform 280ms var(--ds-e-enter);
}
.nv-input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 100px var(--nv-field-focus);
-webkit-text-fill-color: var(--ds-ink);
}
/* ⚠ dark-theme.css paints every text/email/password field and select on the site
(`:root[data-theme="dark"] input[type="text"]`, … — 0,3,1) and so beat the rules above for
SOME of these fields only: tel and url are not in its list. That was two fills in one form
(owner, 2026-10-06), and the same rule also hid the focus and error borders of the fields it
did reach. Restated here at 0,4,0+ for every state, so all the fields look and behave alike. */
:root[data-theme="dark"] .nv-apply .nv-input {
background-color: var(--nv-field);
border-color: var(--ds-line-strong);
color: var(--ds-ink);
}
:root[data-theme="dark"] .nv-apply .nv-input:hover {
border-color: var(--ds-ink-3);
}
:root[data-theme="dark"] .nv-apply .nv-input:focus {
background-color: var(--nv-field-focus);
border-color: var(--ds-ink);
}
:root[data-theme="dark"] .nv-apply .nv-field.is-invalid .nv-input {
border-color: var(--ds-alert);
}
.nv-field__hint {
margin: 6px 0 0;
color: var(--ds-ink-2);
font-size: var(--ds-t-small);
line-height: 1.4;
}
.nv-field__error {
margin: var(--ds-s-2) 0 0;
color: var(--ds-loss);
font-size: 13px;
line-height: 1.4;
font-weight: 700;
}
.nv-field__error:not([hidden]) {
animation: nv-careers-drop 200ms var(--ds-e-enter) both;
}
.nv-field.is-invalid .nv-input,
.nv-field.is-invalid .nv-file,
.nv-field.is-invalid .nv-choice,
.nv-field.is-invalid .nv-check__box {
border-color: var(--ds-alert);
}
.nv-select .nv-input {
padding-right: 44px;
cursor: pointer;
}
.nv-select::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-right: 2px solid var(--ds-ink-2);
border-bottom: 2px solid var(--ds-ink-2);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* work format: a segmented control over real radio buttons, with a yellow block that slides
to the chosen option (needs :has; without it the chosen label simply turns yellow). */
.nv-choice {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--nv-field);
border: 1px solid var(--ds-line-strong);
transition: border-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-choice:hover {
border-color: var(--ds-ink-3);
}
.nv-choice__item {
position: relative;
z-index: 1;
display: block;
cursor: pointer;
}
.nv-choice__item input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.nv-choice__item span {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 var(--ds-s-2);
color: var(--ds-ink-2);
font-size: var(--ds-t-small);
font-weight: 700;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
transition: color var(--ds-d-state) var(--ds-e-enter), background-color var(--ds-d-state) var(--ds-e-enter);
}
.nv-choice__item:hover span {
color: var(--ds-ink);
}
.nv-choice__item input:checked + span {
background: var(--ds-yellow);
color: var(--ds-yellow-ink);
}
.nv-choice__item input:focus-visible + span {
box-shadow: inset 0 0 0 2px var(--ds-ink);
}
@supports selector(:has(*)) {
.nv-choice::before {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
width: calc((100% + 2px) / 3);
background: var(--ds-yellow);
opacity: 0;
transition: transform 280ms var(--ds-e-enter), opacity var(--ds-d-micro) ease-out;
}
.nv-choice:has(input:checked)::before {
opacity: 1;
}
.nv-choice:has(.nv-choice__item:nth-child(2) input:checked)::before {
transform: translateX(100%);
}
.nv-choice:has(.nv-choice__item:nth-child(3) input:checked)::before {
transform: translateX(200%);
}
.nv-choice__item input:checked + span {
background: transparent;
}
}
/* CV: the native input stays in the tab order, visually hidden inside the box */
.nv-file {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "icon text button";
align-items: center;
gap: var(--ds-s-5);
min-height: 80px;
padding: var(--ds-s-4) var(--ds-s-4) var(--ds-s-4) var(--ds-s-5);
background: var(--nv-field);
border: 1px dashed var(--ds-ink-3);
cursor: pointer;
transition: border-color var(--ds-d-micro) var(--ds-e-enter), background-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-file:hover {
border-color: var(--ds-ink-2);
}
.nv-file.is-dragover {
border-style: solid;
border-color: var(--ds-ink);
background: var(--ds-card);
}
.nv-file.has-file {
border-style: solid;
border-color: var(--ds-line-strong);
}
.nv-file__input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.nv-file__icon {
grid-area: icon;
display: grid;
place-items: center;
width: 48px;
height: 48px;
background: var(--ds-card);
color: var(--ds-ink-2);
transition: background-color var(--ds-d-state) var(--ds-e-enter), color var(--ds-d-state) var(--ds-e-enter);
}
.nv-file__doc,
.nv-file__ok {
grid-area: 1 / 1;
transition: opacity var(--ds-d-micro) ease-out, transform 240ms var(--ds-e-enter);
}
.nv-file__ok {
opacity: 0;
transform: scale(.6);
}
.nv-file.has-file .nv-file__icon {
background: var(--ds-yellow);
color: var(--ds-yellow-ink);
}
.nv-file.has-file .nv-file__doc {
opacity: 0;
transform: scale(.6);
}
.nv-file.has-file .nv-file__ok {
opacity: 1;
transform: none;
}
.nv-file__text {
grid-area: text;
display: grid;
gap: 2px;
min-width: 0;
}
.nv-file__name {
overflow: hidden;
color: var(--ds-ink);
font-size: 15px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.nv-file.has-file .nv-file__name {
font-weight: 700;
}
.nv-file__hint {
color: var(--ds-ink-2);
font-size: 13px;
line-height: 1.4;
}
.nv-file__button {
grid-area: button;
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 18px;
/* A secondary button: the card surface the icon square uses, never a second loud block next
to the yellow send button (it was solid ink — white in the dark theme). */
background: var(--ds-card);
border: 1px solid var(--ds-line-strong);
color: var(--ds-ink);
font-size: var(--ds-t-small);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
transition: border-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-file:hover .nv-file__button {
border-color: var(--ds-ink-3);
}
.nv-file__input:focus-visible ~ .nv-file__button {
outline: 2px solid var(--ds-ink);
outline-offset: 2px;
}
/* consent */
.nv-consent {
margin-top: var(--ds-s-7);
}
.nv-check {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--ds-s-4);
cursor: pointer;
}
.nv-check input {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.nv-check__box {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
background: var(--nv-field);
border: 2px solid var(--ds-ink-3);
color: var(--ds-yellow-ink);
transition: background-color var(--ds-d-micro) var(--ds-e-enter), border-color var(--ds-d-micro) var(--ds-e-enter);
}
.nv-check__box svg {
opacity: 0;
transform: scale(.5);
transition: opacity var(--ds-d-micro) ease-out, transform var(--ds-d-state) var(--ds-e-enter);
}
.nv-check:hover .nv-check__box {
border-color: var(--ds-ink-2);
}
.nv-check input:checked + .nv-check__box {
background: var(--ds-yellow);
border-color: var(--ds-yellow);
}
.nv-check input:checked + .nv-check__box svg {
opacity: 1;
transform: none;
}
.nv-check input:focus-visible + .nv-check__box {
outline: 2px solid var(--ds-ink);
outline-offset: 2px;
}
.nv-check__text {
color: var(--ds-ink);
font-size: 14px;
line-height: 1.6;
}
.nv-consent__privacy,
.nv-consent .nv-field__error {
margin-left: 36px;
}
.nv-consent__privacy {
margin-top: var(--ds-s-2);
margin-bottom: 0;
color: var(--ds-ink-2);
font-size: 14px;
line-height: 1.5;
}
.nv-consent__privacy a {
color: var(--ds-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--ds-ink-3);
text-underline-offset: 3px;
}
.nv-consent__privacy a:hover {
text-decoration-color: currentColor;
}
/* captcha, alert, actions */
.nv-apply__captcha {
min-height: 65px;
margin-top: var(--ds-s-6);
}
.nv-apply__alert {
position: relative;
margin: var(--ds-s-6) 0 0;
padding: var(--ds-s-4) var(--ds-s-5) var(--ds-s-4) 38px;
border: 1px solid var(--ds-alert);
color: var(--ds-ink);
font-size: 14px;
line-height: 1.5;
}
.nv-apply__alert:not([hidden]) {
animation: nv-careers-drop 220ms var(--ds-e-enter) both;
}
/* the brand's square, in the alert colour, instead of an icon */
.nv-apply__alert::before {
content: "";
position: absolute;
top: calc(var(--ds-s-4) + 7px);
left: var(--ds-s-5);
width: 8px;
height: 8px;
background: var(--ds-alert);
}
.nv-apply__actions {
margin-top: var(--ds-s-7);
}
.nv-btn.nv-apply__submit {
position: relative;
overflow: hidden;
min-width: 280px;
}
.nv-btn.nv-apply__submit[disabled] {
opacity: .5;
cursor: not-allowed;
}
/* While it sends: an ink bar runs along the button's foot — the request is alive. */
.nv-apply__form[aria-busy="true"] .nv-btn.nv-apply__submit[disabled] {
opacity: 1;
cursor: progress;
}
.nv-apply__form[aria-busy="true"] .nv-apply__submit::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 40%;
height: 3px;
background: var(--ds-yellow-ink);
animation: nv-careers-busy 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* ---------------------------------------------------------------- sent: the one authored moment */
.nv-apply__done {
display: grid;
justify-items: start;
gap: var(--ds-s-4);
outline: none;
}
.nv-apply__done:not([hidden]) > * {
animation: nv-careers-rise 320ms var(--ds-e-enter) both;
}
.nv-apply__done:not([hidden]) > :nth-child(2) { animation-delay: 70ms; }
.nv-apply__done:not([hidden]) > :nth-child(3) { animation-delay: 120ms; }
.nv-apply__done:not([hidden]) > :nth-child(4) { animation-delay: 170ms; }
.nv-apply__done-mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
background: var(--ds-yellow);
color: var(--ds-yellow-ink);
}
.nv-apply__done:not([hidden]) .nv-apply__done-mark {
animation-name: nv-careers-pop;
}
.nv-apply__done:not([hidden]) .nv-apply__done-mark svg {
animation: nv-careers-check 280ms var(--ds-e-enter) 150ms both;
}
.nv-apply__done-title {
margin: var(--ds-s-2) 0 0;
color: var(--ds-ink);
font-size: clamp(26px, 3vw, 36px);
line-height: 1.1;
font-weight: 700;
text-transform: uppercase;
}
.nv-apply__done-text {
max-width: 52ch;
margin: 0 0 var(--ds-s-4);
color: var(--ds-ink-2);
font-size: 17px;
line-height: 1.55;
}
.nv-btn.nv-apply__done-back {
min-height: 48px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
@keyframes nv-careers-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@keyframes nv-careers-drop {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@keyframes nv-careers-pop {
from { opacity: 0; transform: scale(.9); }
to { opacity: 1; transform: none; }
}
@keyframes nv-careers-check {
from { opacity: 0; transform: scale(.5) rotate(-10deg); }
to { opacity: 1; transform: none; }
}
@keyframes nv-careers-busy {
from { transform: translateX(-100%); }
to { transform: translateX(250%); }
}
/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1023px) {
.nv-vsec,
.nv-apply {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--ds-s-5);
}
.nv-vsec__head {
position: static;
}
.nv-vdesc,
.nv-vsec__body {
max-width: 760px;
}
.nv-vhero__mark {
width: min(60%, 420px);
right: -12%;
}
.nv-vhero__title {
max-width: none;
}
}
@media (max-width: 767px) {
.nv-vacancy {
padding-top: var(--ds-s-2);
}
.nv-vhero {
gap: var(--ds-s-7);
}
/* On a phone the title fills the plate's width, so the badge moves down behind the facts. */
.nv-vhero__mark {
top: auto;
right: -30%;
bottom: -14%;
width: 80%;
transform: none;
}
.nv-vhero__foot {
flex-direction: column;
align-items: stretch;
}
.nv-vhero__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-s-5) var(--ds-s-6);
}
.nv-vhero__fact dd {
font-size: 16px;
}
.nv-prose {
font-size: 16px;
}
.nv-apply__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-s-5);
}
.nv-file {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "icon text" "button button";
}
.nv-file__button {
justify-content: center;
}
.nv-btn.nv-cta,
.nv-btn.nv-apply__submit {
width: 100%;
min-width: 0;
}
}
/* ================================================================ closed / unavailable */
.nv-vacancy-state {
display: grid;
justify-items: center;
gap: var(--ds-s-5);
max-width: 640px;
margin: 0 auto;
padding: var(--ds-s-9) 0;
text-align: center;
}
.nv-vacancy-state__title {
margin: 0;
color: var(--ds-ink);
font-size: clamp(28px, 3.6vw, 40px);
line-height: 1.1;
font-weight: 700;
text-transform: uppercase;
text-wrap: balance;
}
.nv-vacancy-state__text {
max-width: 46ch;
margin: 0 0 var(--ds-s-2);
color: var(--ds-ink-2);
font-size: 17px;
line-height: 1.55;
}
.nv-vacancy-state .nv-btn {
min-height: 52px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
/* ================================================================ reduced motion
Movement goes; what tells the visitor something happened stays, as an instant or a fade. */
@media (prefers-reduced-motion: reduce) {
.nv-vacancy-row::after {
transform: scaleX(1);
opacity: 0;
transition: opacity var(--ds-d-micro) ease-out;
}
.nv-vacancy-row:hover::after,
.nv-vacancy-row:active::after,
.nv-vacancy-row:focus-visible::after {
opacity: 1;
}
.nv-vacancy-row__arrow,
.nv-vacancy-row:hover .nv-vacancy-row__arrow {
transform: none;
transition: none;
}
.nv-vacancy-row__arrow--next {
display: none;
}
.nv-vacancy-row__go,
.nv-vacancy-row:hover .nv-vacancy-row__go {
transition-delay: 0s;
}
.nv-vacancy__back svg,
.nv-vacancy__back:hover svg {
transform: none;
transition: none;
}
/* The inversion stays (a colour change, not movement); the arrow stays put. !important
because the hover rules above sit at up to 0,6,0. */
.nv-cta__icon .nv-cta__arrow,
.nv-btn.nv-cta:active {
transform: none !important;
transition: none;
}
.nv-cta__arrow--next {
display: none;
}
.nv-control__line,
.nv-input:focus + .nv-control__line {
transition: none;
}
.nv-choice::before {
transition: opacity var(--ds-d-micro) ease-out;
}
.nv-file__doc,
.nv-file__ok,
.nv-check__box svg {
transform: none;
transition: opacity var(--ds-d-micro) ease-out;
}
.nv-field__error:not([hidden]),
.nv-apply__alert:not([hidden]),
.nv-apply__done:not([hidden]) > *,
.nv-apply__done:not([hidden]) .nv-apply__done-mark,
.nv-apply__done:not([hidden]) .nv-apply__done-mark svg {
animation: nv-careers-fade 160ms ease-out both;
}
.nv-apply__form[aria-busy="true"] .nv-apply__submit::after {
content: none;
}
}
@keyframes nv-careers-fade {
from { opacity: 0; }
to { opacity: 1; }
}