small — text + arrow, no box
Size and colour are independent: pick one size modifier and one colour
modifier. Every button hovers into a different fill and nudges its arrow.
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 25px;
background-color: #0c2889;
border: 0;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.btn:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.btn__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
background-color: #ffe810;
color: #000000;
}
.btn:hover .btn__icon {
transform: translateX(4px);
}
}
.btn {
/* -- colours ------------------------------------------------------------- */
}
.btn--yellow {
background-color: #ffe810;
color: #000000;
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.btn--yellow:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.btn--outline-dark {
background-color: transparent;
box-shadow: inset 0 0 0 1px #000000;
color: #333333;
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.btn--outline-dark:hover {
background-color: #000000;
color: #ffffff;
}
}
.btn--outline-blue {
background-color: transparent;
box-shadow: inset 0 0 0 1px #0c2889;
color: #0c2889;
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.btn--outline-blue:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.btn {
/* Same blue outline, black label — the pairing Figma uses on the data sheets
page, where it sits next to a yellow button of the same shape. */
}
.btn--outline-blue-dark {
background-color: transparent;
box-shadow: inset 0 0 0 1px #0c2889;
color: #000000;
}
@media (hover: hover) and (pointer: fine) {
.btn--outline-blue-dark:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.btn {
/* Figma's "Yellow" as opposed to "Bright-yellow" — the deeper of the two. */
}
.btn--gold {
background-color: #fed326;
color: #000000;
}
@media (hover: hover) and (pointer: fine) {
.btn--gold:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.btn {
/* -- sizes --------------------------------------------------------------- */
}
.btn--md {
justify-content: center;
padding: 10px 15px;
line-height: 24px;
}
.btn--md .btn__icon {
width: 9px;
height: 9px;
}
.btn {
/* Small filled button — Figma's Small-button, 33px tall: 8px inset all round
and a 5px gap before the 9px arrow. */
}
.btn--sm {
gap: 5px;
padding: 8px;
font-size: 14px;
font-weight: 600;
line-height: normal;
letter-spacing: 0.28px;
}
.btn--sm .btn__icon {
width: 9px;
height: 9px;
}
.btn {
/* Wide — the Uppercase-Emphasis text style in a 12/24 box, used for the two
catalogue links on the data sheets page. */
}
.btn--wide {
gap: 10px;
justify-content: center;
padding: 12px 24px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.btn--wide .btn__icon {
width: 10px;
height: 10px;
}
.btn--block {
width: 100%;
justify-content: center;
}
.btn {
/* -- states -------------------------------------------------------------- */
}
.btn:disabled, .btn.is-disabled {
background-color: #e0e0e0;
box-shadow: none;
color: #979696;
pointer-events: none;
}
@media (max-width: 767.98px) {
.btn {
padding: 14px 20px;
font-size: 16px;
}
.btn--md {
padding: 10px 14px;
font-size: 15px;
}
.btn {
/* Long catalogue labels have to wrap once there is no room for one line. */
}
.btn--wide {
max-width: 100%;
padding: 10px 18px;
font-size: 17px;
white-space: normal;
}
}
/* =============================================================================
Small button — a text link with an arrow. No box, no padding.
============================================================================= */
.btn-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.28px;
line-height: normal;
text-transform: uppercase;
cursor: pointer;
transition: color 0.25s ease;
}
.btn-link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.btn-link__icon {
width: 9px;
height: 9px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.btn-link:hover {
color: #0c2889;
}
.btn-link:hover .btn-link__icon {
transform: translateX(4px);
}
}
.btn-link--yellow {
color: #fed326;
}
@media (hover: hover) and (pointer: fine) {
.btn-link--yellow:hover {
color: #ffffff;
}
}
.btn-link--blue {
color: #0c2889;
}
@media (hover: hover) and (pointer: fine) {
.btn-link--blue:hover {
color: #006bb6;
}
}
/* === Buttons — end ========================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Form controls — inputs, textarea, native select, checkbox, radio, file.
Select2 gets its own theme in components/_select2.scss.
Company
Message goes here
Add .field--error / .field--success to the wrapper to colour the whole group.
============================================================================= */
.field {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
/* Barlow SemiBold 14, uppercase, navy — and the required asterisk takes the
same colour as the label, as the design has it. */
}
.field__label {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #173453;
text-transform: uppercase;
}
.field--required .field__label::after {
content: " *";
}
.field__control {
width: 100%;
padding: 12px 16px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
border-radius: 0;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
transition: border-color 0.25s ease, background-color 0.25s ease;
appearance: none;
}
.field__control::placeholder {
color: #696767;
opacity: 1;
}
.field__control:hover:not(:disabled) {
border-color: #979696;
}
.field__control {
/* Pointer focus gets the border tint only; keyboard focus also gets a real
ring, because a 1px border changing colour is not a focus indicator you
can find with the keyboard. */
}
.field__control:focus {
border-color: #0c2889;
outline: none;
}
.field__control:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 1px;
}
.field__control:disabled, .field__control[readonly] {
background-color: #eeeeee;
color: #979696;
cursor: not-allowed;
}
.field {
/* textarea */
}
.field textarea.field__control {
min-height: 140px;
line-height: 1.4;
resize: vertical;
}
.field {
/* native select — the chevron is a background image so the box matches inputs */
}
.field select.field__control {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23696767' fill-rule='evenodd' d='M12.375 5.219 8 8.719 3.625 5.219a1 1 0 0 0-1.25 1.562l5 4a1 1 0 0 0 1.25 0l5-4a1 1 0 0 0-1.25-1.562Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
cursor: pointer;
}
.field {
/* -- messages ------------------------------------------------------------ */
}
.field__hint {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #696767;
}
.field {
/* just-validate writes one of these under a control only when that control
is actually wrong, so it never needs hiding. */
}
.field__error {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: block;
color: #cc4b4c;
}
.field__control.is-invalid {
border-color: #cc4b4c;
}
.field--error .field__control {
border-color: #cc4b4c;
}
.field--success .field__control {
border-color: #2e8b57;
}
/* =============================================================================
Checkbox and radio — the native control is hidden and re-drawn, so it stays
keyboard-accessible and works inside a normal form post.
============================================================================= */
.check {
display: inline-flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.check__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.check__box {
position: relative;
width: 16px;
height: 16px;
margin-top: 3px;
flex-shrink: 0;
background-color: #ffffff;
border: 1px solid #979696;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.check__box::after {
content: "";
position: absolute;
top: 1px;
left: 4.5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 0.15s ease;
}
.check__label {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #333333;
}
.check__input:checked + .check__box {
background-color: #0c2889;
border-color: #0c2889;
}
.check__input:checked + .check__box::after {
transform: rotate(45deg) scale(1);
}
.check__input:focus-visible + .check__box {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.check__input:disabled + .check__box {
background-color: #eeeeee;
border-color: #c1c1c1;
}
@media (hover: hover) and (pointer: fine) {
.check:hover .check__box {
border-color: #0c2889;
}
}
.check {
/* radio: same markup, round box */
}
.check--radio .check__box {
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 50%;
}
.check--radio .check__box::after {
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border: 0;
border-radius: 50%;
background-color: #ffffff;
transform: translate(-50%, -50%) scale(0);
}
.check--radio .check__input:checked + .check__box::after {
transform: translate(-50%, -50%) scale(1);
}
/* =============================================================================
File input — native input hidden behind a BROWSE button, filename shown left.
Requires js-file-input (see src/js/app/forms.js).
============================================================================= */
.file-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 0 0 16px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
transition: border-color 0.25s ease;
/* The input is visually hidden, so the box shows the focus. */
}
.file-field:has(:focus-visible) {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.file-field:focus-within {
border-color: #0c2889;
}
.file-field__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.file-field__name {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
flex: 1;
color: #696767;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-field__name.is-filled {
color: #333333;
}
.file-field__button {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 16px;
padding: 10px 14px;
background-color: #e0e0e0;
color: #333333;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.file-field__button:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.file-field {
/* Contact page: no outer box, and the button leads — closer to the native
control the design draws there. */
}
.file-field--inline {
padding: 12px 0;
background: none;
border: 0;
}
.file-field--inline .file-field__button {
order: -1;
padding: 6px 12px;
background-color: #c1c1c1;
border-radius: 4px;
font-size: 12px;
text-transform: none;
}
.file-field--inline .file-field__name {
color: #dddddd;
font-size: 13px;
}
.file-field--inline .file-field__name.is-filled {
color: #ffffff;
}
/* -- form layout helpers ----------------------------------------------------- */
.form__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 767.98px) {
.form__row {
grid-template-columns: 1fr;
}
}
.form__row--3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023.98px) {
.form__row--3 {
grid-template-columns: 1fr;
}
}
.form__row--full {
grid-template-columns: 1fr;
}
.form__actions {
display: flex;
gap: 16px;
margin-top: 8px;
}
.form > * + * {
margin-top: 20px;
}
/* Server notices above a form (sent / could not send / fix the fields). */
.form-notice {
margin: 0 0 1.5rem;
padding: 1rem 1.25rem;
border-radius: 4px;
background: #e8f5e9;
color: #1b5e20;
font-weight: 600;
}
.form-notice--error, .form-notice--invalid {
background: #fdecea;
color: #b71c1c;
}
/* === Form controls — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Select2 — "norpak" theme.
Select2's stock look is nothing like the design, so rather than fighting the
default stylesheet with overrides we register our own theme name. Everything
here is scoped to .select2-container--norpak, so the vendor CSS is untouched
and upgrading Select2 will not silently change how these look.
Applied by src/js/app/forms.js to any .
============================================================================= */
.select2-container--norpak {
/* Width comes from the `width: '100%'` option in forms.js, which sets it
inline on the control. Do NOT force it in CSS — Select2 renders the open
dropdown as a SECOND .select2-container, and a `width: 100% !important`
here stretches that one across the page and causes horizontal scroll. */
/* -- the closed control -------------------------------------------------- */
}
.select2-container--norpak .select2-selection--single {
position: relative;
display: flex;
align-items: center;
height: auto;
padding: 12px 40px 12px 16px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
border-radius: 0;
/* Select2 draws its own outline; ours replaces it, and only for keyboard
focus — the element carries tabindex="0", so it is a real tab stop. */
outline: none;
transition: border-color 0.25s ease;
}
.select2-container--norpak .select2-selection--single:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.select2-container--norpak .select2-selection__rendered {
padding: 0;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 24px;
}
.select2-container--norpak .select2-selection__placeholder {
color: #696767;
}
.select2-container--norpak {
/* chevron — same glyph as the native select */
}
.select2-container--norpak .select2-selection__arrow {
position: absolute;
top: 50%;
right: 10px;
width: 16px;
height: 16px;
pointer-events: none;
transform: translateY(-50%);
}
.select2-container--norpak .select2-selection__arrow b {
display: block;
width: 16px;
height: 16px;
margin: 0;
border: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23696767' fill-rule='evenodd' d='M12.375 5.219 8 8.719 3.625 5.219a1 1 0 0 0-1.25 1.562l5 4a1 1 0 0 0 1.25 0l5-4a1 1 0 0 0-1.25-1.562Z'/%3E%3C/svg%3E") no-repeat center/16px;
transition: transform 0.25s ease;
}
.select2-container--norpak:hover .select2-selection--single {
border-color: #979696;
}
.select2-container--norpak {
/* Select2 sets this while the control holds focus by any means. */
}
.select2-container--norpak.select2-container--focus .select2-selection--single {
border-color: #0c2889;
}
.select2-container--norpak.select2-container--open .select2-selection--single {
border-color: #0c2889;
}
.select2-container--norpak.select2-container--open .select2-selection__arrow b {
transform: rotate(180deg);
}
.select2-container--norpak.select2-container--disabled .select2-selection--single {
background-color: #eeeeee;
color: #979696;
}
.select2-container--norpak {
/* -- the open dropdown ---------------------------------------------------- */
}
.select2-container--norpak .select2-dropdown {
background-color: #ffffff;
border: 1px solid #0c2889;
border-radius: 0;
}
.select2-container--norpak .select2-search--dropdown {
padding: 8px;
border-bottom: 1px solid #e0e0e0;
}
.select2-container--norpak .select2-search__field {
padding: 8px 10px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
outline: none;
}
.select2-container--norpak .select2-search__field:focus {
border-color: #0c2889;
}
.select2-container--norpak .select2-results__options {
max-height: 260px;
overflow-y: auto;
}
.select2-container--norpak .select2-results__option {
padding: 10px 16px;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
transition: background-color 0.25s ease, color 0.25s ease;
}
.select2-container--norpak .select2-results__option--highlighted {
background-color: #e4e9f4;
color: #0c2889;
}
.select2-container--norpak .select2-results__option--selected {
background-color: #0c2889;
color: #ffffff;
}
.select2-container--norpak .select2-results__message {
color: #696767;
font-style: italic;
}
/* === Select2 theme — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Tabs — the Products / Solutions / Projects block on the home page.
Figma 853:1719: an 84px tab bar over a white panel holding a 220px intro
column beside a 1400px card area.
Card count differs per tab, so the cards stretch to fill: --tab-cols is set
on .tab-cards from the data (6 for Products and Solutions, 4 for Projects).
============================================================================= */
.tabs__bar {
display: flex;
align-items: flex-end;
height: 84px;
}
.tabs {
/* Active tab is the full 84px; the others are 80px, so the active one stands
2px proud top and bottom. */
}
.tabs__tab {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 12px;
height: 80px;
padding: 16px 30px;
background-color: #eef0f2;
color: #333333;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, height 0.25s ease;
}
.tabs__tab:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
.tabs__tab.is-active {
height: 84px;
background-color: #0c2889;
color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
.tabs__tab:hover:not(.is-active) {
background-color: #e4e9f4;
box-shadow: inset 0 -4px 0 #0c2889;
}
}
.tabs__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
transition: filter 0.25s ease;
/* the icons are drawn for a light bar, so invert them on the blue tab */
}
.tabs__tab.is-active .tabs__icon {
filter: brightness(0) invert(1);
}
@media (max-width: 1279.98px) {
.tabs__icon {
width: 36px;
height: 36px;
}
}
@media (max-width: 767.98px) {
.tabs__icon {
display: none;
}
}
.tabs__label {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 1279.98px) {
.tabs__label {
font-size: 19px;
}
}
@media (max-width: 767.98px) {
.tabs__label {
font-size: 15px;
}
}
.tabs {
/* -- panels -------------------------------------------------------------- */
}
.tabs__panel {
display: grid;
grid-template-columns: 220px minmax(0, 1400px);
gap: 16px;
padding: 60px 20px 0;
background-color: #ffffff;
}
.tabs__panel[hidden] {
display: none;
}
@media (max-width: 1439.98px) {
.tabs__panel {
grid-template-columns: 200px minmax(0, 1fr);
padding-top: 40px;
}
}
@media (max-width: 1023.98px) {
.tabs__panel {
grid-template-columns: 1fr;
gap: 28px;
padding-top: 32px;
}
}
.tabs {
/* Products only: 20 cards wrap *under* the intro column (Figma runs 6 in the
first row then 7 and 7), so the panel becomes one 7-column grid and the
card list dissolves into it with display:contents. Solutions and Projects
are single rows and keep the simpler two-track layout above. */
}
.tabs__panel--flow {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.tabs__panel--flow .tab-intro {
grid-column: 1;
grid-row: 1;
}
.tabs__panel--flow .tab-cards {
display: contents;
}
@media (max-width: 1919.98px) {
.tabs__panel--flow {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 1439.98px) {
.tabs__panel--flow {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width: 1279.98px) {
.tabs__panel--flow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.tabs__panel--flow {
/* below md the intro goes full width again and the cards return to a grid
of their own, so it does not sit in a two-column cell */
}
@media (max-width: 1023.98px) {
.tabs__panel--flow {
grid-template-columns: 1fr;
}
.tabs__panel--flow .tab-intro {
grid-column: auto;
grid-row: auto;
}
.tabs__panel--flow .tab-cards {
display: grid;
}
}
@media (max-width: 767.98px) {
.tabs__bar {
height: 62px;
}
.tabs__tab {
height: 58px;
padding: 10px 8px;
}
.tabs__tab.is-active {
height: 62px;
}
.tabs__panel {
padding-inline: 0;
}
}
/* -----------------------------------------------------------------------------
Intro column beside the cards.
-------------------------------------------------------------------------- */
.tab-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.tab-intro__head {
display: flex;
flex-direction: column;
gap: 7px;
}
.tab-intro__rule {
display: block;
width: 48px;
height: 4px;
background-color: #fed326;
}
.tab-intro__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
.tab-intro__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #000000;
}
.tab-intro__text p + p {
margin-top: 1em;
}
@media (max-width: 1023.98px) {
.tab-intro {
gap: 20px;
}
}
/* -----------------------------------------------------------------------------
Card grid and cards.
-------------------------------------------------------------------------- */
.tab-cards {
display: grid;
grid-template-columns: repeat(var(--tab-cols, 6), minmax(0, 1fr));
gap: 16px;
align-content: start;
}
@media (max-width: 1439.98px) {
.tab-cards {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1023.98px) {
.tab-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.tab-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
.tab-card__link {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 10px;
}
.tab-card__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.tab-card {
/* Figma fixes the image at 200px tall and lets the width follow the column,
which is why the Projects cards are wider than the Products ones. */
}
.tab-card__media {
display: block;
height: 200px;
overflow: hidden;
}
.tab-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
@media (max-width: 1023.98px) {
.tab-card__media {
height: 160px;
}
}
@media (max-width: 767.98px) {
.tab-card__media {
height: 130px;
}
}
.tab-card {
/* Figma nests title / specs / link in a 4px-gap body inside the 8px-gap card,
which is why the link sits closer to the title than the image does. */
}
.tab-card__body {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.tab-card__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
color: #000000;
transition: color 0.25s ease;
}
@media (max-width: 1279.98px) {
.tab-card__title {
font-size: 17px;
line-height: 21px;
}
}
@media (max-width: 767.98px) {
.tab-card__title {
font-size: 15px;
line-height: 19px;
}
}
.tab-card {
/* Spec bullets — only the Products hub cards carry these. */
}
.tab-card__specs {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 10px;
}
.tab-card__spec {
display: flex;
align-items: flex-start;
gap: 9px;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: normal;
letter-spacing: 0.28px;
}
.tab-card {
/* Sits on the first line of a wrapped spec, not in the middle of the block. */
}
.tab-card__spec-icon {
width: 12.7px;
height: 9.5px;
flex-shrink: 0;
margin-top: 4px;
color: #0c2889;
}
.tab-card__more {
display: inline-flex;
align-items: center;
gap: 5px;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.28px;
text-transform: uppercase;
}
.tab-card__arrow {
width: 9px;
height: 9px;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.tab-card__link:hover .tab-card__media img {
transform: scale(1.06);
}
.tab-card__link:hover .tab-card__title {
color: #0c2889;
}
.tab-card__link:hover .tab-card__arrow {
transform: translateX(4px);
}
}
.tab-card {
/* About "Our Expertise": the same card without the Explore link, so the 10px
inset that balances that link is dropped and the image stays 200x200 inside
a wider column instead of stretching to it. */
}
.tab-card--plain .tab-card__link {
padding: 0;
}
.tab-card--plain .tab-card__media {
width: 200px;
max-width: 100%;
}
/* === Tabs — end ============================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Block head — the yellow rule above an Oxanium title, with an optional
"View all" link on the right. One Figma component (819:926) reused by the
home page, About, Our Services, Latest News and the inner-page sections.
.block-head 155px rule, 32/36 title
.block-head--sm 48px rule, 24px title (About "Our Expertise")
.block-head__accent second half of a two-tone title, in corporate blue
============================================================================= */
.block-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.block-head__main {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-head__rule {
display: block;
width: 155px;
height: 4px;
background-color: #fed326;
}
.block-head__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.block-head__title {
font-size: 24px;
line-height: 1.2;
}
}
.block-head__accent {
color: #0c2889;
}
.block-head__link {
flex-shrink: 0;
}
.block-head {
/* -- size ----------------------------------------------------------------- */
}
.block-head--sm .block-head__main {
gap: 7px;
}
.block-head--sm .block-head__rule {
width: 48px;
}
.block-head--sm .block-head__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
}
.block-head--lg .block-head__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 65px;
}
@media (max-width: 1279.98px) {
.block-head--lg .block-head__title {
font-size: 32px;
line-height: 1.3;
}
}
@media (max-width: 767.98px) {
.block-head--lg .block-head__title {
font-size: 24px;
}
}
.block-head {
/* -- alignment ------------------------------------------------------------ */
}
.block-head--center {
justify-content: center;
text-align: center;
}
.block-head--center .block-head__main {
align-items: center;
}
@media (max-width: 767.98px) {
.block-head__rule {
width: 110px;
}
}
/* === Block head — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
CTA banner — "Need help finding the right product?". Figma 947:4214 (223px).
A conveyor photo under a blue diagonal gradient, a yellow chat icon, two
lines of copy and a yellow button. Reused across the product and service
pages, so the copy and the button come in as macro arguments.
============================================================================= */
.cta-banner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 40px 188px 40px 142px;
overflow: hidden;
}
@media (max-width: 1919.98px) {
.cta-banner {
padding-inline: 80px;
}
}
@media (max-width: 1279.98px) {
.cta-banner {
flex-direction: column;
align-items: flex-start;
gap: 28px;
padding: 40px;
}
}
@media (max-width: 767.98px) {
.cta-banner {
padding: 28px 20px;
}
}
.cta-banner {
/* The product single page drops the banner into a 1349px column instead of
the full 1680; Figma tightens the insets there so the headline still fits
on one line. */
}
.cta-banner--compact {
padding: 40px 110px 40px 52px;
}
@media (max-width: 1919.98px) {
.cta-banner--compact {
padding-inline: 52px;
}
}
.cta-banner__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.cta-banner {
/* Figma's angle, carried over as-is. */
}
.cta-banner::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(102.94deg, #0051a1 27.89%, rgba(23, 52, 83, 0.5) 94.1%);
}
.cta-banner__main {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 35px;
}
@media (max-width: 767.98px) {
.cta-banner__main {
gap: 20px;
}
}
.cta-banner__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 143px;
height: 143px;
flex-shrink: 0;
color: #ffe810;
}
@media (max-width: 1279.98px) {
.cta-banner__icon-wrap {
width: 96px;
height: 96px;
}
}
@media (max-width: 767.98px) {
.cta-banner__icon-wrap {
width: 64px;
height: 64px;
}
}
.cta-banner__icon {
width: 129.6px;
height: 113.6px;
}
@media (max-width: 1279.98px) {
.cta-banner__icon {
width: 87px;
height: 76px;
}
}
@media (max-width: 767.98px) {
.cta-banner__icon {
width: 58px;
height: 51px;
}
}
.cta-banner__text {
display: flex;
flex-direction: column;
gap: 10px;
color: #ffffff;
}
.cta-banner__title {
margin: 0;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 36px;
text-transform: uppercase;
}
@media (max-width: 1919.98px) {
.cta-banner__title {
font-size: 32px;
line-height: 34px;
}
}
@media (max-width: 1279.98px) {
.cta-banner__title {
font-size: 26px;
line-height: 30px;
}
}
@media (max-width: 767.98px) {
.cta-banner__title {
font-size: 21px;
line-height: 26px;
}
}
.cta-banner__subtitle {
margin: 0;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 32px;
line-height: normal;
}
@media (max-width: 1919.98px) {
.cta-banner__subtitle {
font-size: 24px;
}
}
@media (max-width: 1279.98px) {
.cta-banner__subtitle {
font-size: 20px;
}
}
@media (max-width: 767.98px) {
.cta-banner__subtitle {
font-size: 17px;
}
}
.cta-banner__action {
position: relative;
z-index: 1;
flex-shrink: 0;
}
/* === CTA banner — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Sidebar CTA — "Can't find what you need?". Figma 953:5631 (280x238).
The narrow-column version of the cta-banner: chat icon on the left, two
lines of copy and a yellow button on the right. Its height follows its copy
rather than Figma's fixed 238px, so longer CMS text cannot clip.
============================================================================= */
.sidebar-cta {
display: flex;
gap: 12px;
padding: 21px 12px 21px 10px;
background-color: #fafbfd;
}
.sidebar-cta__icon-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
width: 68px;
height: 68px;
flex-shrink: 0;
color: #0c2889;
}
.sidebar-cta__icon {
width: 61px;
height: 54px;
}
.sidebar-cta__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 25px;
min-width: 0;
}
.sidebar-cta__copy {
display: flex;
flex-direction: column;
gap: 11px;
}
.sidebar-cta__title {
margin: 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 22px;
text-transform: uppercase;
}
.sidebar-cta__text {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.sidebar-cta {
/* Figma scales the Big-Button to 72% here rather than using a kit size. */
}
.sidebar-cta__action {
gap: 8px;
padding: 14px 18px;
font-size: 13px;
}
.sidebar-cta__action .btn__icon {
width: 10px;
height: 10px;
}
/* === Sidebar CTA — end ====================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Browse Products sidebar — Figma 904:2528 (280px).
A dark header over an accordion of the twenty categories; the open one turns
lavender with a yellow edge and reveals its sub-products.
Runs on the shared js-accordion (see js/app/accordion.js), so the open/close
height is pure CSS and nothing is measured.
============================================================================= */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 18px;
}
.sidebar-nav__header {
padding: 20px;
background-color: #021b3c;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
}
.sidebar-nav__list {
display: flex;
flex-direction: column;
}
.sidebar-nav {
/* Services / Solutions / Projects: the same bar without children, so the row
is a link on its own and Figma opens the rows up by a hairline. */
}
.sidebar-nav--flat .sidebar-nav__list {
gap: 1px;
}
.sidebar-nav--flat .sidebar-nav__link {
padding-right: 10px;
}
.sidebar-nav {
/* The row splits in two: the label navigates to the category, the button on
the right only opens the sub-list. Both live inside the same bordered row
so it still reads as one bar. */
}
.sidebar-nav__row {
display: flex;
align-items: stretch;
background-color: #fafbfd;
border-bottom: 1px solid #dddddd;
/* transparent so the open state can colour it without shifting the text */
border-left: 4px solid transparent;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.sidebar-nav__link {
flex: 1;
min-width: 0;
padding: 10px 6px 10px 20px;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-transform: uppercase;
transition: color 0.25s ease;
}
.sidebar-nav__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
.sidebar-nav__link:hover {
color: #0c2889;
}
}
.sidebar-nav {
/* 34px wide and full row height, so the plus is a real target on a phone
rather than a 12px glyph. */
}
.sidebar-nav__expand {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
flex-shrink: 0;
padding-right: 10px;
background: none;
border: 0;
color: #000000;
cursor: pointer;
transition: color 0.25s ease;
}
.sidebar-nav__expand:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
.sidebar-nav__expand:hover {
color: #0c2889;
}
}
.sidebar-nav__expand-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sidebar-nav__item.is-open .sidebar-nav__row {
background-color: #e4e9f4;
border-bottom-color: transparent;
border-left-color: #fed326;
}
.sidebar-nav__item.is-open .sidebar-nav__link {
color: #0c2889;
font-weight: 600;
}
.sidebar-nav__item.is-open .sidebar-nav__expand {
color: #0c2889;
}
.sidebar-nav {
/* Plus that drops its upright bar when the section opens. */
}
.sidebar-nav__icon {
position: relative;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.sidebar-nav__icon::before, .sidebar-nav__icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 2px;
margin-top: -1px;
background-color: currentColor;
transition: transform 0.25s ease;
}
.sidebar-nav__icon::after {
transform: rotate(90deg);
}
.sidebar-nav__expand[aria-expanded=true] .sidebar-nav__icon::after {
transform: rotate(0deg);
}
.sidebar-nav {
/* -- sub-products --------------------------------------------------------- */
}
.sidebar-nav__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
/* the clipped element carries no padding — see README, collapsing panels */
}
.sidebar-nav__panel > * {
min-height: 0;
padding: 0;
overflow: hidden;
}
.sidebar-nav__item.is-open .sidebar-nav__panel {
grid-template-rows: 1fr;
}
.sidebar-nav__sub {
padding: 10px 0 20px 20px;
background-color: #ffffff;
}
.sidebar-nav__sub-link {
display: flex;
align-items: center;
gap: 14px;
padding: 5px 10px 5px 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: normal;
transition: color 0.25s ease;
}
.sidebar-nav__sub-link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
.sidebar-nav__sub-link:hover {
color: #0c2889;
}
}
.sidebar-nav__sub-link.is-active {
color: #0c2889;
}
.sidebar-nav__caret {
width: 5px;
height: 10px;
flex-shrink: 0;
color: #0c2889;
transform: rotate(-90deg);
}
/* === Sidebar nav — end ====================================================== */
/* =============================================================================
Small screens — the sidebar becomes a drawer.
Below 1280 a stacked sidebar puts ~900px of accordion between the reader and
the first product, so the same markup is repositioned as a slide-in panel
behind a fixed trigger. No duplicate DOM: this is the desktop aside moved.
============================================================================= */
@media (max-width: 1279.98px) {
.aside-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 901;
width: min(340px, 88vw);
padding-bottom: 24px;
background-color: #ffffff;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
overflow-y: auto;
overscroll-behavior: contain;
/* visibility, not just transform: an off-screen panel must leave the tab
order too, or keyboard users land in an invisible menu.
It is switched with a delay rather than a duration — instantly visible on
open (so the close button can take focus straight away) and held visible
until the slide-out has finished. */
visibility: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease, visibility 0s 0.3s;
}
.aside-drawer.is-open {
visibility: visible;
transform: none;
transition: transform 0.3s ease, visibility 0s;
}
}
.aside-drawer__close {
display: none;
position: absolute;
top: 14px;
right: 14px;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #ffffff;
cursor: pointer;
}
.aside-drawer__close:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.aside-drawer__close:hover {
color: #fed326;
}
}
@media (max-width: 1279.98px) {
.aside-drawer__close {
display: flex;
}
}
.aside-drawer__close-icon {
width: 16px;
height: 16px;
}
/* Fixed trigger. Sits bottom-left so the bottom-right corner stays free for
the Request Info List badge. */
.browse-trigger {
display: none;
position: fixed;
left: 16px;
bottom: 16px;
z-index: 100;
align-items: center;
gap: 10px;
padding: 12px 18px;
background-color: #0c2889;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.25s ease;
}
.browse-trigger:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.browse-trigger:hover {
background-color: #021b3c;
}
}
@media (max-width: 1279.98px) {
.browse-trigger {
display: inline-flex;
}
}
@media (max-width: 575.98px) {
.browse-trigger {
left: 12px;
bottom: 12px;
padding: 11px 14px;
font-size: 14px;
}
}
.browse-trigger {
/* Three bars, same idea as the header burger, so no icon asset is needed. */
}
.browse-trigger__icon {
position: relative;
width: 16px;
height: 12px;
flex-shrink: 0;
}
.browse-trigger__icon::before, .browse-trigger__icon::after, .browse-trigger__icon {
background-image: none;
}
.browse-trigger__icon::before, .browse-trigger__icon::after {
content: "";
position: absolute;
left: 0;
width: 16px;
height: 2px;
background-color: currentColor;
}
.browse-trigger__icon::before {
top: 0;
box-shadow: 0 5px 0 currentColor;
}
.browse-trigger__icon::after {
bottom: 0;
}
/* === Sidebar drawer — end =================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Product thumbnail — Figma 904:2909 (320x590).
A bordered white card: photo panel, two-line title, a grey spec box with
ruled rows, a solid "Learn more" and an outlined "Add to Request Info List".
Shared by the category listing and the related-products strip.
============================================================================= */
.product-thumb {
display: flex;
flex-direction: column;
background-color: #ffffff;
border: 1px solid #dddddd;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.product-thumb:hover {
border-color: #0c2889;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.product-thumb:hover .product-thumb__media img {
transform: scale(1.04);
}
}
.product-thumb__media {
display: flex;
align-items: center;
justify-content: center;
height: 307px;
padding: 19px 9px;
overflow: hidden;
}
.product-thumb__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
@media (max-width: 767.98px) {
.product-thumb__media {
height: 240px;
}
}
.product-thumb__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 20px 20px;
}
.product-thumb {
/* Two lines then ellipsis. Height lives here rather than on the clamped
element — see README, line-clamp. */
/* Barlow, title case — h1-h3 default to Oxanium uppercase, so both are off. */
}
.product-thumb__title {
height: 57px;
overflow: hidden;
color: #173453;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: normal;
text-transform: none;
transition: color 0.25s ease;
}
.product-thumb__title > span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-thumb__specs {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 12px;
background-color: #eef0f2;
border-radius: 4px;
}
.product-thumb {
/* Figma rules every row, the last one included. */
}
.product-thumb__spec {
display: flex;
align-items: flex-start;
gap: 9px;
padding-bottom: 6px;
border-bottom: 1px solid #dddddd;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: normal;
letter-spacing: 0.28px;
}
.product-thumb {
/* Sits on the first line of a wrapped spec, not in the middle of the block. */
}
.product-thumb__spec-icon {
width: 12.7px;
height: 9.5px;
flex-shrink: 0;
margin-top: 4px;
color: #0c2889;
}
.product-thumb {
/* -- actions -------------------------------------------------------------- */
}
.product-thumb__action {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: normal;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
.product-thumb__action:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
.product-thumb__action--primary {
background-color: #0c2889;
color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
.product-thumb__action--primary:hover {
background-color: #021b3c;
}
}
.product-thumb__action--primary .product-thumb__action-icon {
width: 12px;
height: 12px;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.product-thumb__action--primary:hover .product-thumb__action-icon {
transform: translateX(4px);
}
}
.product-thumb__action--outline {
background-color: transparent;
border: 1px solid #0c2889;
color: #0c2889;
}
@media (hover: hover) and (pointer: fine) {
.product-thumb__action--outline:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.product-thumb__action--outline .product-thumb__action-icon {
width: 24px;
height: 24px;
}
.product-thumb__action.is-added {
background-color: #e4e9f4;
border-color: #e4e9f4;
color: #0c2889;
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.product-thumb:hover .product-thumb__title {
color: #0c2889;
}
}
/* === Product thumbnail — end ================================================ */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Slider arrow — the square button used by the product gallery and the related
products carousel. Positioning belongs to whoever uses it; this is only the
look and the two Swiper states.
Swiper adds .swiper-button-disabled at an end and .swiper-button-lock when
there is nothing to navigate at all, so a short list shows no arrows.
============================================================================= */
.slider-nav {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #0c2889;
color: #0c2889;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.slider-nav:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.slider-nav:hover {
background-color: #0c2889;
color: #ffffff;
}
}
.slider-nav.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
.slider-nav.swiper-button-lock {
display: none;
}
@media (max-width: 767.98px) {
.slider-nav {
width: 34px;
height: 34px;
}
}
.slider-nav__icon {
width: 12px;
height: 12px;
}
.slider-nav--prev .slider-nav__icon {
transform: rotate(90deg);
}
.slider-nav--next .slider-nav__icon {
transform: rotate(-90deg);
}
/* === Slider arrow — end ===================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Content block — Figma 1152:13667.
The repeatable body section for the Services / Solutions / Projects pages:
an optional image, an optional headline, and a rich-text column. A modifier
decides where the media sits, so the same block covers every arrangement the
editor can choose:
.content-block--media-left image left, text right
.content-block--media-right image right, text left
.content-block--media-center image above the text, full block width
.content-block--media-none text only
Nothing else changes between them, so an editor switching the setting cannot
break the layout.
============================================================================= */
.content-block {
display: grid;
align-items: center;
gap: 54px;
}
@media (max-width: 1439.98px) {
.content-block {
gap: 40px;
}
}
@media (max-width: 1023.98px) {
.content-block {
gap: 28px;
}
}
.content-block {
/* -- media beside the text ------------------------------------------------ */
}
.content-block--media-left, .content-block--media-right {
grid-template-columns: minmax(0, 687fr) minmax(0, 652fr);
/* one column once there is not enough width for two readable ones */
}
@media (max-width: 1023.98px) {
.content-block--media-left, .content-block--media-right {
grid-template-columns: minmax(0, 1fr);
}
}
.content-block--media-right {
grid-template-columns: minmax(0, 652fr) minmax(0, 687fr);
}
.content-block--media-right .content-block__media {
grid-column: 2;
grid-row: 1;
}
.content-block--media-right {
/* stacked, the image goes back on top rather than under the copy */
}
@media (max-width: 1023.98px) {
.content-block--media-right .content-block__media {
grid-column: 1;
grid-row: 1;
}
}
.content-block {
/* -- media above, or none at all ------------------------------------------ */
}
.content-block--media-center, .content-block--media-none {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.content-block--media-center {
gap: 32px;
}
.content-block {
/* The modifier decides the arrangement on its own: if an editor sets "none"
while an image is still attached, the class wins rather than the markup. */
}
.content-block--media-none .content-block__media {
display: none;
}
.content-block__media {
overflow: hidden;
}
.content-block__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.content-block {
/* Figma's pairing is 687x464; the ratio holds as the column narrows. */
}
.content-block--media-left .content-block__media, .content-block--media-right .content-block__media {
aspect-ratio: 687/464;
}
.content-block--media-center .content-block__media {
aspect-ratio: 1396/464;
}
.content-block__body {
display: flex;
flex-direction: column;
gap: 31px;
}
@media (max-width: 767.98px) {
.content-block__body {
gap: 20px;
}
}
/* A run of blocks down a page. */
.content-blocks {
display: flex;
flex-direction: column;
gap: 60px;
}
@media (max-width: 1023.98px) {
.content-blocks {
gap: 40px;
}
}
/* === Content block — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Key Applications — Figma 1152:13671.
A heading over a three-column run of ticked points. Used by the Solutions and
Projects pages; the grid reflows rather than the columns being fixed, so the
list works with any number of points.
============================================================================= */
.key-points {
display: flex;
flex-direction: column;
gap: 40px;
}
@media (max-width: 767.98px) {
.key-points {
gap: 24px;
}
}
.key-points__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.key-points__title {
font-size: 19px;
line-height: 26px;
}
}
.key-points__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 111px;
}
@media (max-width: 1439.98px) {
.key-points__grid {
gap: 32px 60px;
}
}
@media (max-width: 1023.98px) {
.key-points__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 40px;
}
}
@media (max-width: 575.98px) {
.key-points__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.key-points__item {
display: flex;
align-items: flex-start;
gap: 8px;
}
.key-points__icon {
width: 18.8px;
height: 18.2px;
/* nudged onto the cap height of the label beside it */
margin-top: 2px;
flex-shrink: 0;
color: #0c2889;
}
.key-points__body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.key-points__label {
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.key-points__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #000000;
}
/* === Key points — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
News card — Figma 953:4675 (392 wide).
Photo, dated meta line, uppercase headline, a two-line excerpt and a Read
more link. Used by the blog listing and reusable anywhere a news grid is
needed.
============================================================================= */
.news-card {
display: flex;
flex-direction: column;
gap: 23px;
}
.news-card__media {
display: block;
width: 100%;
aspect-ratio: 394/306;
overflow: hidden;
}
.news-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card__head {
display: flex;
flex-direction: column;
gap: 20px;
}
.news-card__date {
display: flex;
align-items: center;
gap: 10px;
color: #979696;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: normal;
letter-spacing: 0.28px;
}
.news-card__date-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #c1c1c1;
}
.news-card__body {
display: flex;
flex-direction: column;
gap: 15px;
}
.news-card {
/* Barlow, not the Oxanium-uppercase heading default. */
}
.news-card__title {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
transition: color 0.25s ease;
}
@media (max-width: 767.98px) {
.news-card__title {
font-size: 17px;
line-height: 21px;
}
}
.news-card {
/* Figma fixes the excerpt at 70px — a shade over three lines at 16/1.3, so
the clamp does the trimming and the height sits on the wrapper. */
}
.news-card__excerpt {
height: 70px;
overflow: hidden;
color: #000000;
}
.news-card__excerpt > span {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
}
.news-card__more {
display: inline-flex;
align-items: center;
gap: 5px;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.28px;
text-transform: uppercase;
}
.news-card__arrow {
width: 9px;
height: 9px;
transition: transform 0.25s ease;
}
.news-card:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.news-card:hover .news-card__media img {
transform: scale(1.05);
}
.news-card:hover .news-card__title {
color: #0c2889;
}
.news-card:hover .news-card__arrow {
transform: translateX(4px);
}
}
/* === News card — end ======================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Partner card — Figma 986:8633 (384x605).
A framed logo over the partner's name, role and site, a description, and a
link footer. Cards in a row stretch to the tallest, so the footer is pushed
to the bottom and every card's link sits on the same line.
============================================================================= */
.partner-card {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px;
background-color: #ffffff;
border: 1px solid #e4e9f4;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
transition: border-color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.partner-card:hover {
border-color: #fed326;
transform: translateY(-3px);
}
}
.partner-card__logo {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
padding: 12px;
background-color: #ffffff;
border: 1px solid #e4e9f4;
}
.partner-card__logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.partner-card__body {
display: flex;
flex-direction: column;
gap: 12px;
}
.partner-card__ident {
display: flex;
flex-direction: column;
}
.partner-card__name {
margin: 0;
color: #173453;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.partner-card {
/* Figma opens 4px under the name, then runs the role and domain tight. */
}
.partner-card__role {
margin: 4px 0 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-transform: uppercase;
}
.partner-card__domain {
margin: 0;
color: #737b7d;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
word-break: break-word;
}
.partner-card__desc {
color: #4f4f4f;
}
.partner-card__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: auto;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.partner-card__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.partner-card__link:hover {
color: #006bb6;
}
.partner-card__link:hover .partner-card__arrow {
transform: translateX(4px);
}
}
.partner-card__arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
@media (max-width: 767.98px) {
.partner-card {
padding: 20px;
}
.partner-card__name {
font-size: 21px;
}
}
/* === Partner card — end ===================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Location card — Figma 980:7304.
One office: a pin and its name over a hairline, then address, phone numbers
and opening hours in three columns. The columns collapse one at a time as
the card narrows, so a card is readable at any width.
============================================================================= */
.location-card {
display: flex;
flex-direction: column;
gap: 20px;
padding: 28px;
background-color: #ffffff;
border: 1px solid #e4e9f4;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.03));
}
@media (max-width: 767.98px) {
.location-card {
padding: 20px;
}
}
.location-card {
/* -- head ----------------------------------------------------------------- */
}
.location-card__head {
display: flex;
align-items: flex-start;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid #e4e9f4;
}
.location-card__pin {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
background-color: #fafbfd;
border-radius: 50%;
color: #0c2889;
}
.location-card__pin-icon {
width: 20px;
height: 20px;
}
.location-card__ident {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.location-card__name {
margin: 0;
color: #1a202c;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.location-card__name {
font-size: 20px;
}
}
.location-card__role {
margin: 0;
color: #6a7c93;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.location-card__place {
margin: 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.location-card {
/* -- body ----------------------------------------------------------------- */
/* Figma's three columns are 186 / 276 / 183 with a 40px gap, which only fits
at the design width. Wrapping rather than a breakpoint lets each column
drop to its own line exactly when it stops fitting, whatever the card is
sharing the row with. */
}
.location-card__body {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
color: #1a202c;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
@media (max-width: 1439.98px) {
.location-card__body {
gap: 20px 32px;
}
}
.location-card__body {
/* Full-width rows rather than flex-direction: column, which would read the
basis below as a height. */
}
@media (max-width: 767.98px) {
.location-card__body {
gap: 20px;
}
.location-card__body > * {
flex: 1 1 100%;
}
}
.location-card__address {
flex: 0 1 186px;
}
.location-card__contacts {
flex: 0 1 276px;
}
.location-card__hours {
flex: 1 1 183px;
}
.location-card {
/* The label half of every "Address: / Phone: / Fax:" pair. */
}
.location-card__term {
margin: 0;
font-weight: 700;
line-height: normal;
}
.location-card__address address {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
font-style: normal;
}
.location-card__contacts {
display: flex;
flex-direction: column;
gap: 12px;
}
.location-card__contact {
display: flex;
align-items: center;
gap: 12px;
}
.location-card__contact p {
margin: 0;
}
.location-card__contact a {
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
.location-card__contact a:hover {
color: #0c2889;
text-decoration: underline;
}
}
.location-card__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #0c2889;
}
.location-card__hours {
display: flex;
flex-direction: column;
gap: 10px;
}
.location-card__hours-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: #000000;
font-weight: 700;
line-height: normal;
}
.location-card__hours-list {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 24px;
}
.location-card__hours-list .is-muted {
color: #6a7c93;
}
/* === Location card — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Map section — Figma 1023:7403.
A Google Maps embed with the location picker and the info card floating over
it. The marker comes from the address in contact.json, so nothing here has to
know where a pin belongs; "Get Directions" opens Google Maps in a new tab.
Below the tablet breakpoint the overlay stops floating and stacks under the
map, because a 340px card over a 375px map hides the map entirely.
============================================================================= */
.map-locations {
position: relative;
/* Figma's band is very wide and shallow, which stops being a usable map long
before the layout breaks — so the shape squares up as the page narrows. */
}
.map-locations__canvas {
position: relative;
/* width first, or min-height would win the aspect ratio and widen the box
past the viewport on a phone */
width: 100%;
aspect-ratio: 1931/621;
min-height: 320px;
overflow: hidden;
}
@media (max-width: 1279.98px) {
.map-locations__canvas {
aspect-ratio: 5/2;
}
}
@media (max-width: 1023.98px) {
.map-locations__canvas {
aspect-ratio: 3/2;
}
}
.map-locations__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.map-locations {
/* The keyless embed draws Google's own place card in the top-left corner —
exactly where the design puts the panel. Sliding the frame up lifts that
card out of view without touching the attribution along the bottom, which
has to stay visible. The supported keyed embed puts its card bottom-left
instead, so this only applies while contact.json has no mapsKey. */
}
.map-locations--keyless .map-locations__frame {
top: -110px;
height: calc(100% + 110px);
}
.map-locations {
/* -- floating overlay ----------------------------------------------------- */
/* pointer-events: none lets a drag that starts on the map reach the map,
not this layer; the panel and the card switch it back on. */
}
.map-locations__overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
@media (max-width: 1023.98px) {
.map-locations__overlay {
position: static;
}
}
.map-locations__grid {
position: relative;
height: 100%;
}
@media (max-width: 1023.98px) {
.map-locations__grid {
display: flex;
flex-direction: column;
gap: 20px;
padding-block: 24px;
}
}
.map-locations {
/* Absolute children are placed against the container's border box, so the
gutter has to be added back to keep them on the page's measure. */
}
.map-locations__panel {
position: absolute;
top: 31px;
left: 59px;
display: flex;
flex-direction: column;
gap: 32px;
width: 380px;
padding: 20px;
background-color: #ffffff;
pointer-events: auto;
}
@media (max-width: 1279.98px) {
.map-locations__panel {
top: 20px;
left: 40px;
width: 330px;
gap: 24px;
}
}
@media (max-width: 1023.98px) {
.map-locations__panel {
position: static;
width: auto;
padding: 0;
}
}
.map-locations__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.map-locations__title {
margin: 0;
color: #0c2889;
font-size: 32px;
line-height: 36px;
}
@media (max-width: 1279.98px) {
.map-locations__title {
font-size: 26px;
line-height: 1.2;
}
}
@media (max-width: 767.98px) {
.map-locations__title {
font-size: 22px;
}
}
.map-locations__text {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.map-locations__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.map-locations {
/* Unselected is an outlined button, selected is filled — the two states
swap the border colour as well as the fill, as Figma has them. */
}
.map-locations__option {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background-color: #ffffff;
border: 1px solid #0c2889;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
text-align: left;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.map-locations__option:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.map-locations__option:hover {
background-color: #e4e9f4;
}
}
.map-locations__option.is-active {
background-color: #0c2889;
border-color: #e4e9f4;
color: #ffffff;
}
.map-locations__option-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: #0c2889;
}
.map-locations__option.is-active .map-locations__option-icon {
color: #ffffff;
}
.map-locations {
/* -- info card ------------------------------------------------------------ */
}
.map-locations__card {
position: absolute;
top: 171px;
right: 84px;
display: flex;
flex-direction: column;
gap: 16px;
width: 340px;
padding: 24px;
background-color: #ffffff;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
pointer-events: auto;
}
@media (max-width: 1279.98px) {
.map-locations__card {
top: 20px;
right: 40px;
width: 300px;
}
}
@media (max-width: 1023.98px) {
.map-locations__card {
position: static;
width: auto;
padding: 0;
filter: none;
}
}
.map-locations__card-ident {
display: flex;
flex-direction: column;
gap: 4px;
}
.map-locations__card-name {
margin: 0;
color: #1a202c;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.map-locations__card-role {
margin: 0;
color: #6a7c93;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.map-locations__card-address {
display: flex;
flex-direction: column;
gap: 2px;
color: #1a202c;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-style: normal;
line-height: 1.3;
}
.map-locations__card-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
background-color: #0c2889;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: normal;
text-transform: uppercase;
transition: background-color 0.25s ease, color 0.25s ease;
}
.map-locations__card-link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.map-locations__card-link:hover {
background-color: #ffe810;
color: #000000;
}
.map-locations__card-link:hover .map-locations__card-arrow {
transform: translateX(4px);
}
}
@media (max-width: 1023.98px) {
.map-locations__card-link {
align-self: flex-start;
}
}
.map-locations__card-arrow {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
/* === Map section — end ====================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Resource list — Figma 957:5720.
A run of downloadable resources: heading, rich text, and a file row whose
icon changes with the file type (img/file-icons/pdf.svg, doc.svg — they are
multi-coloured, so they stay separate files rather than joining the sprite).
============================================================================= */
.resource-list {
display: flex;
flex-direction: column;
gap: 71px;
}
@media (max-width: 1023.98px) {
.resource-list {
gap: 48px;
}
}
.resource-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.resource-item__title {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
/* Barlow heading — opt out of the uppercase Oxanium default in base/ */
text-transform: uppercase;
}
.resource-item__body {
color: #000000;
}
.resource-item__body a {
color: #0c2889;
text-decoration: underline;
word-break: break-word;
}
@media (hover: hover) and (pointer: fine) {
.resource-item__body a:hover {
color: #006bb6;
}
}
.resource-item {
/* -- download row --------------------------------------------------------- */
}
.resource-item__download {
display: flex;
align-items: center;
gap: 12px;
color: #000000;
}
.resource-item__download:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
.resource-item__download:hover {
color: #0c2889;
}
.resource-item__download:hover .resource-item__file-icon {
transform: translateY(-2px);
}
}
.resource-item {
/* One box for both icons so the labels line up whatever the file type is. */
}
.resource-item__file-icon {
width: 45px;
height: 57px;
flex-shrink: 0;
object-fit: contain;
transition: transform 0.25s ease;
}
.resource-item__file-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.resource-item__file-action {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.resource-item__file-name {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12.8px;
font-weight: 500;
line-height: 1.1;
}
/* === Resource list — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Data-sheet catalogue — Figma 1019:7294.
Groups of model links laid out in columns of five. `grid-auto-flow: column`
over five fixed rows reproduces Figma's column-first reading order without
the template having to know how many columns a group needs; below the
tablet breakpoint the same list reflows into ordinary rows.
============================================================================= */
.datasheet-list {
display: flex;
flex-direction: column;
gap: 60px;
}
@media (max-width: 1023.98px) {
.datasheet-list {
gap: 40px;
}
}
.datasheet-group {
display: flex;
flex-direction: column;
gap: 20px;
}
.datasheet-group__title {
margin: 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
}
.datasheet-group {
/* Figma's 210px columns, read top to bottom and then across — but the
browser decides how many fit, so a fifty-link group becomes four columns
of a dozen rather than ten squeezed columns of five. */
}
.datasheet-group__list {
column-width: 210px;
column-gap: 48px;
margin: 0;
padding: 0;
}
@media (min-width: 1440px) {
.datasheet-group__list {
column-gap: 72px;
}
}
.datasheet-group__item {
break-inside: avoid;
padding-bottom: 17px;
}
.datasheet-group__link {
display: flex;
align-items: flex-start;
gap: 8px;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
text-decoration: underline;
}
.datasheet-group__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.datasheet-group__link:hover {
color: #0c2889;
}
}
.datasheet-group {
/* A 26px icon centred on the 21px first line of the label. */
}
.datasheet-group__icon {
width: 26px;
height: 26px;
flex-shrink: 0;
margin-top: -3px;
color: #0c2889;
}
/* === Data-sheet catalogue — end ============================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Breadcrumbs — Barlow 14 with "greater than" separators. Figma 1091:16388.
============================================================================= */
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
}
.breadcrumbs__item {
color: #6a7c93;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.28px;
}
.breadcrumbs__item:not(:first-child)::before {
content: ">";
margin-right: 6px;
}
.breadcrumbs__link {
color: inherit;
transition: color 0.25s ease;
}
.breadcrumbs__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.breadcrumbs__link:hover {
color: #0c2889;
text-decoration: underline;
}
}
.breadcrumbs__current {
font-weight: 700;
}
/* === Breadcrumbs — end ====================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Pagination — not in Figma. Square 44px cells in the corporate blue, matching
the sidebar and the slider arrows rather than inventing a new shape.
============================================================================= */
.pagination {
display: flex;
justify-content: center;
}
.pagination__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
}
.pagination__page, .pagination__step {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
height: 44px;
padding-inline: 12px;
background-color: #ffffff;
border: 1px solid #dddddd;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pagination__page:focus-visible, .pagination__step:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.pagination__page:hover, .pagination__step:hover {
border-color: #0c2889;
color: #0c2889;
}
}
.pagination__page.is-current {
background-color: #0c2889;
border-color: #0c2889;
color: #ffffff;
pointer-events: none;
}
.pagination__step-icon {
width: 10px;
height: 10px;
}
.pagination {
/* Previous points left, Next right — the sprite chevron faces down. */
}
.pagination__step [class$=step-icon]:first-child {
transform: rotate(90deg);
}
.pagination__step [class$=step-icon]:last-child {
transform: rotate(-90deg);
}
.pagination__step.is-disabled {
background-color: #fafbfd;
color: #979696;
}
.pagination__gap {
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 44px;
color: #696767;
}
.pagination {
/* On a phone the word labels are what overflow first, not the numbers. */
}
@media (max-width: 575.98px) {
.pagination__step span:not([class]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.pagination__step {
min-width: 44px;
padding-inline: 0;
}
}
/* === Pagination — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Sub navigation — the tab bar under an inner-page hero. Figma 895:2701 (90px).
Scrolls sideways on a phone rather than wrapping to two rows.
============================================================================= */
.sub-nav {
background-color: #fafbfd;
}
.sub-nav__list {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
height: 90px;
padding-inline: 40px;
}
@media (max-width: 1023.98px) {
.sub-nav__list {
gap: 24px;
height: 68px;
}
}
.sub-nav__list {
/* Wraps rather than scrolling sideways on a phone: three tabs at 16px come
to two rows, and a hidden horizontal scroller reads as a broken layout. */
}
@media (max-width: 767.98px) {
.sub-nav__list {
flex-wrap: wrap;
gap: 4px 20px;
height: auto;
padding: 14px 16px;
}
}
.sub-nav__item {
flex-shrink: 0;
}
.sub-nav__link {
display: block;
padding: 5px 10px;
border-bottom: 2px solid transparent;
color: #021b3c;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.25s ease, border-color 0.25s ease;
}
.sub-nav__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.sub-nav__link:hover {
color: #0c2889;
}
}
.sub-nav__link.is-active {
border-bottom-color: #fed326;
color: #0c2889;
}
@media (max-width: 1023.98px) {
.sub-nav__link {
font-size: 16px;
}
}
@media (max-width: 767.98px) {
.sub-nav__link {
font-size: 15px;
}
}
/* === Sub nav — end ========================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Accordion — the home FAQ, and reusable for the product "Available
Modifications" list later.
Panels open with grid-template-rows 0fr → 1fr, so nothing is measured in JS
and the height can never go stale. The inner wrapper carries overflow:hidden
and NO padding — padding on the collapsing element is not clipped and would
leave a strip showing when closed.
============================================================================= */
.faq-section {
padding: 120px 40px;
background-color: #e4e9f4;
}
@media (max-width: 1279.98px) {
.faq-section {
padding: 72px 40px;
}
}
@media (max-width: 767.98px) {
.faq-section {
padding: 48px 16px;
}
}
.faq-section__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 42px;
width: 100%;
max-width: 1393px;
margin-inline: auto;
}
@media (max-width: 767.98px) {
.faq-section__inner {
gap: 28px;
}
}
.faq-section__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.faq-section__title {
font-size: 24px;
line-height: 1.2;
}
}
.faq {
display: flex;
flex-direction: column;
gap: 28px;
width: 100%;
}
@media (max-width: 767.98px) {
.faq {
gap: 16px;
}
}
.faq__item {
background-color: #ffffff;
border: 1px solid #c1c1c1;
}
.faq__heading {
margin: 0;
}
.faq__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 15px 20px;
background-color: #ffffff;
text-align: left;
cursor: pointer;
}
.faq__toggle:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
.faq__toggle:hover .faq__question {
color: #0c2889;
}
}
.faq__question {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
line-height: normal;
color: #000000;
transition: color 0.25s ease;
}
@media (max-width: 767.98px) {
.faq__question {
font-size: 17px;
}
}
.faq {
/* Plus that rotates into a minus. Figma draws it as two 18x2 bars; the open
variant keeps only the horizontal one. */
}
.faq__icon {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.faq__icon::before, .faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 18px;
height: 2px;
margin-top: -1px;
background-color: #173453;
transition: transform 0.25s ease;
}
.faq__icon::after {
transform: rotate(90deg);
}
.faq__toggle[aria-expanded=true] .faq__icon::after, .faq__toggle[aria-expanded=true] .faq__icon::after {
transform: rotate(0deg);
}
.faq {
/* -- answer -------------------------------------------------------------- */
}
.faq__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
/* padding:0 is not tidiness — overflow:hidden clips content but NOT
padding, so any padding here survives the collapse as a visible strip.
Spacing goes on .faq__answer, one level further in. */
}
.faq__panel > * {
min-height: 0;
padding: 0;
overflow: hidden;
}
.faq {
/* keyed off the item, not an adjacent sibling: the toggle is wrapped in an
for heading semantics, so button + panel are not siblings */
}
.faq__item.is-open .faq__panel {
grid-template-rows: 1fr;
}
.faq__answer {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #000000;
/* safely inside the clipped wrapper */
padding: 10px 20px 20px;
}
.faq__answer p + p {
margin-top: 1.3em;
}
.faq__less {
margin-top: 14px;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.faq__less:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.faq__less:hover {
color: #006bb6;
}
}
/* === Accordion — end ======================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Add-to-list modal — Figma 1126:8099 ("popup", 690×391): a centred white
panel, "Request Info List" as its heading, the product name under it and the
two actions side by side.
Fancybox 6 makes the slide's root element the panel itself: .add-popup IS the
.f-html box, so padding, radius and shadow live here, and the close button
Fancybox injects as the panel's first child is pulled into the corner (by
default it floats above the panel, on the backdrop).
============================================================================= */
.add-popup {
/* 720 rather than the design's 690: our button labels are longer, and the
two must still share one row at desktop width. */
width: 720px;
max-width: 100%;
padding: 52px 40px 56px;
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
text-align: center;
}
@media (max-width: 767.98px) {
.add-popup {
padding: 48px 24px 32px;
}
}
.add-popup .f-button.is-close-button {
--f-close-button-color: #979696;
--f-close-button-hover-color: #0c2889;
--f-close-button-svg-width: 18px;
--f-close-button-svg-height: 18px;
top: 10px;
right: 10px;
}
.add-popup {
/* The design's big line is "Request Info List"; the product name sits under it. */
}
.add-popup__eyebrow {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0 0 20px;
color: #0c2889;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.add-popup__eyebrow {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
}
}
.add-popup__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
margin: 0 0 28px;
font-weight: 600;
line-height: 1.25;
color: #0c2889;
text-transform: none;
}
.add-popup__label {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
margin: 0 0 12px;
font-weight: 600;
color: #696767;
}
.add-popup {
/* A centred block whose rows stay left-aligned. */
}
.add-popup__mods {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 0 auto 28px;
text-align: left;
}
.add-popup {
/* Side by side, sharing the spare width; once a button no longer fits it
wraps onto its own full-width row. */
}
.add-popup__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 24px;
}
.add-popup__actions .btn {
flex: 1 1 auto;
justify-content: center;
}
@media (max-width: 575.98px) {
.add-popup__actions .btn {
white-space: normal;
}
}
/* The slide reserves 34px above an html panel for a close button that now sits inside it. */
.fancybox__slide.has-html.has-close-btn {
padding-top: 8px;
}
/* === Add-to-list modal — end ================================================ */
/* -- layout ----------------------------------------------------------------- */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Header — 145px tall at 1920. Blue logo block on the left, two stacked rows
on the right: utility nav above, main nav below, split by a 1px blue rule.
Below 1280px everything but the logo and burger is hidden; see _mobile-nav.
============================================================================= */
.header {
/* fixed, not sticky: a sticky header still occupies its space in flow, so
shrinking it on scroll would pull the whole page up by the difference.
.page reserves the full height instead (see base/_global.scss). */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background-color: #ffffff;
/* .is-stuck (shadow) and .is-compact (shrink) both come from header.js */
transition: box-shadow 0.25s ease;
}
.header.is-stuck {
box-shadow: 0 2px 12px rgba(2, 27, 60, 0.14);
}
.header__bar {
display: flex;
align-items: stretch;
min-height: 145px;
transition: min-height 0.25s ease;
}
@media (max-width: 1279.98px) {
.header__bar {
align-items: center;
min-height: 70px;
}
}
.header {
/* -- logo block ---------------------------------------------------------- */
}
.header__logo {
display: flex;
align-items: center;
justify-content: center;
/* 545 / 1920 = 28.4%. Fluid so the bar keeps working between 1280 and 1920,
and lands exactly on the design at 1920. */
width: clamp(300px, 28.4vw, 545px);
flex-shrink: 0;
padding: 16px clamp(20px, 3.85vw, 74px);
background-color: #0c2889;
transition: padding 0.25s ease;
}
.header__logo img {
width: 100%;
max-width: 397px;
height: auto;
transition: max-width 0.25s ease;
}
@media (max-width: 1279.98px) {
.header__logo {
width: auto;
min-width: 190px;
align-self: stretch;
padding: 10px 20px;
}
.header__logo img {
max-width: 150px;
}
}
@media (max-width: 575.98px) {
.header__logo {
min-width: 150px;
padding: 8px 14px;
}
.header__logo img {
max-width: 120px;
}
}
.header {
/* -- right-hand side ----------------------------------------------------- */
}
.header__body {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
@media (max-width: 1279.98px) {
.header__body {
display: none;
}
}
.header__top {
display: flex;
align-items: center;
gap: clamp(8px, 1.25vw, 24px);
height: 51px;
padding-inline: clamp(16px, 4.5vw, 86px) clamp(20px, 6.8vw, 130px);
border-bottom: 1px solid #0c2889;
transition: height 0.25s ease;
}
.header__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(10px, 1.25vw, 24px);
flex: 1;
padding-inline: clamp(16px, 4.74vw, 91px) clamp(20px, 6.3vw, 121px);
}
.header {
/* -- search toggle ------------------------------------------------------- */
}
.header__search-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #000000;
transition: color 0.25s ease;
}
.header__search-toggle:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.header__search-toggle:hover {
color: #0c2889;
}
}
.header__search-toggle.is-active {
color: #0c2889;
}
.header {
/* -- phone --------------------------------------------------------------- */
}
.header__phone {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(12px, 0.73vw, 14px);
font-weight: 600;
letter-spacing: 1.12px;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.header__phone:hover {
color: #006bb6;
}
}
.header {
/* -- Hytrol integration partner badge ------------------------------------ */
/* Between 1280 and 1440 the bottom row runs out of room, so the badge keeps
the Hytrol mark and drops the "Integration Partner" wording. */
}
.header__partner {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.header__partner img {
width: clamp(78px, 5.4vw, 103px);
height: auto;
transition: width 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.header__partner:hover {
opacity: 0.85;
}
}
.header__partner-label {
width: 77px;
/* The wording is the first thing to go when the bar tightens. It needs
more room than 1440 to sit without crowding the Request Info button,
hence its own breakpoint rather than reusing xl. */
}
@media (max-width: 1699.98px) {
.header__partner-label {
display: none;
}
}
.header__partner-label {
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
text-transform: uppercase;
}
.header__partner-label sup {
font-size: 0.7em;
}
.header__cta {
flex-shrink: 0;
padding-inline: clamp(14px, 1.3vw, 25px);
font-size: clamp(15px, 0.94vw, 18px);
}
.header {
/* Between the burger breakpoint and the design width the bar has to earn its
room, or the Request Info button runs off the right edge: the insets
tighten and the nav type steps down, the same trade the compact state
makes when the page scrolls. */
}
@media (max-width: 1439.98px) {
.header .header__bottom {
padding-inline: clamp(16px, 3.2vw, 48px) clamp(16px, 3.4vw, 52px);
}
.header .main-nav__label {
font-size: clamp(13px, 0.98vw, 15px);
}
.header .main-nav__icon {
width: clamp(26px, 1.9vw, 30px);
height: clamp(26px, 1.9vw, 30px);
}
}
/* =============================================================================
Compact state — desktop only. Everything shrinks proportionally rather than
any row being removed, so search, phone and the secondary links all stay
reachable while scrolled. 145px -> 96px.
============================================================================= */
@media (min-width: 1280px) {
.header.is-compact .header__bar {
min-height: 96px;
}
.header.is-compact .header__logo {
padding-block: 10px;
}
.header.is-compact .header__logo img {
max-width: 262px;
}
.header.is-compact .header__top {
height: 36px;
}
.header.is-compact .utility-nav__link {
padding-block: 8px;
font-size: clamp(12px, 0.78vw, 14px);
}
.header.is-compact .main-nav__icon {
width: clamp(28px, 1.7vw, 32px);
height: clamp(28px, 1.7vw, 32px);
}
.header.is-compact .main-nav__label {
font-size: clamp(13px, 0.84vw, 16px);
}
.header.is-compact .header__partner img {
width: clamp(64px, 4vw, 76px);
}
.header.is-compact .header__cta {
padding-block: 12px;
font-size: clamp(14px, 0.78vw, 15px);
}
.header.is-compact .header__phone {
font-size: clamp(11px, 0.68vw, 13px);
}
}
/* =============================================================================
Utility nav — the small row above the main nav.
============================================================================= */
.utility-nav__list {
display: flex;
align-items: center;
gap: clamp(6px, 1.67vw, 32px);
}
.utility-nav__link {
display: block;
padding: 16px clamp(3px, 0.52vw, 10px);
border-top: 4px solid transparent;
transition: color 0.25s ease, border-color 0.25s ease, padding 0.25s ease, font-size 0.25s ease;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(13px, 0.84vw, 16px);
font-weight: 600;
white-space: nowrap;
transition: color 0.25s ease, border-color 0.25s ease;
}
.utility-nav__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
.utility-nav__link:hover {
color: #0c2889;
border-top-color: #ffe810;
}
}
.utility-nav__link.is-active {
border-top-color: #ffe810;
}
.utility-nav__link {
/* "Contact Us" is the emphasised one */
}
.utility-nav__link--contact {
color: #0c2889;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
/* =============================================================================
Main nav — four buttons that open mega menus.
============================================================================= */
.main-nav__list {
display: flex;
align-items: center;
gap: clamp(2px, 0.84vw, 16px);
}
.main-nav__item {
position: static;
}
.main-nav__link {
display: flex;
align-items: center;
gap: 2px;
padding: 10px 5px;
color: #0c2889;
cursor: pointer;
}
.main-nav__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.main-nav__icon {
width: clamp(34px, 2.5vw, 48px);
height: clamp(34px, 2.5vw, 48px);
flex-shrink: 0;
transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.main-nav__label {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(14px, 0.94vw, 18px);
font-weight: 700;
line-height: normal;
text-transform: uppercase;
white-space: nowrap;
}
.main-nav__caret {
width: 11px;
height: 7px;
margin-left: clamp(3px, 0.42vw, 8px);
color: #0c2889;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.main-nav__link:hover .main-nav__label {
color: #006bb6;
}
.main-nav__link:hover .main-nav__icon {
transform: translateY(-2px);
}
}
.main-nav__link[aria-expanded=true] .main-nav__caret {
transform: rotate(180deg);
}
/* =============================================================================
Header search — slides down from the utility row.
============================================================================= */
.header-search {
border-top: 1px solid #e0e0e0;
background-color: #fafbfd;
}
.header-search__form {
display: flex;
gap: 0;
padding-block: 20px;
}
.header-search__input {
flex: 1;
min-width: 0;
padding: 14px 18px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
border-right: 0;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
}
.header-search__input::placeholder {
color: #696767;
}
.header-search__input:focus {
outline: none;
border-color: #0c2889;
}
.header-search__submit {
padding-block: 14px;
flex-shrink: 0;
}
/* =============================================================================
Burger — visible below 1280px only.
============================================================================= */
.burger {
display: none;
width: 48px;
height: 48px;
margin-left: auto;
margin-right: 12px;
padding: 12px;
color: #0c2889;
}
.burger:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (max-width: 1279.98px) {
.burger {
display: block;
}
}
.burger__box {
position: relative;
display: block;
width: 24px;
height: 18px;
}
.burger__line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background-color: currentColor;
transition: background-color 0.1s 0.25s ease;
}
.burger__line::before, .burger__line::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transition: transform 0.25s ease, top 0.25s ease;
}
.burger__line::before {
top: -8px;
}
.burger__line::after {
top: 8px;
}
.burger[aria-expanded=true] .burger__line {
background-color: transparent;
}
.burger[aria-expanded=true] .burger__line::before {
top: 0;
transform: rotate(45deg);
}
.burger[aria-expanded=true] .burger__line::after {
top: 0;
transform: rotate(-45deg);
}
/* =============================================================================
Shared dim overlay behind the mobile drawer and open mega menus.
============================================================================= */
.overlay {
position: fixed;
inset: 0;
z-index: 900;
background-color: rgba(2, 27, 60, 0.5);
opacity: 0;
transition: opacity 0.25s ease;
}
.overlay.is-visible {
opacity: 1;
}
/* === Header — end =========================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Mega menus — full-width panels below the header. Dark navy with a 4px yellow
top edge (Figma frames are 1916x414).
The content block is centred in the panel, not aligned to the site container:
Products content 955px wide, 56px from the top
Services content 1120px wide, 77px from the top
Two layouts share one shell:
.mega__columns Products — View All + three link columns
.mega__cards Services / Solutions / Projects — 200px image cards
============================================================================= */
.mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 300;
background-color: #021b3c;
border-top: 4px solid #ffe810;
/* [hidden] is toggled by header.js; these two states drive the motion */
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.mega.is-open {
opacity: 1;
transform: none;
pointer-events: auto;
}
.mega__inner {
display: flex;
justify-content: center;
gap: 52px;
padding: 56px 40px 81px;
}
@media (max-width: 1439.98px) {
.mega__inner {
padding: 40px 40px 48px;
gap: 32px;
}
}
.mega {
/* -- Products: link columns ---------------------------------------------- */
}
.mega__view-all {
flex-shrink: 0;
width: 105px;
padding-block: 3px;
color: #ffe810;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 19px;
}
@media (hover: hover) and (pointer: fine) {
.mega__view-all:hover {
color: #ffffff;
text-decoration: underline;
}
}
.mega__view-all:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
.mega__columns {
display: flex;
gap: 52px;
}
@media (max-width: 1439.98px) {
.mega__columns {
gap: 32px;
}
}
.mega {
/* Widths come straight from Figma so the labels wrap on the same words. */
}
.mega__column {
display: flex;
flex-direction: column;
gap: 10px;
}
.mega__column:nth-child(1) {
width: 207px;
}
.mega__column:nth-child(2) {
width: 238px;
}
.mega__column:nth-child(3) {
width: 249px;
}
.mega__link {
display: block;
padding: 3px 10px 3px 0;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 19px;
transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.mega__link:hover {
color: #ffe810;
transform: translateX(3px);
}
}
.mega__link:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
.mega {
/* -- Services / Solutions / Projects: image cards ------------------------ */
}
.mega__cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.mega {
/* card menus sit slightly lower in the design */
}
.mega:has(.mega__cards) .mega__inner {
padding-top: 77px;
padding-bottom: 53px;
}
.mega-card {
width: 200px;
}
.mega-card__link {
display: flex;
flex-direction: column;
gap: 17px;
height: 100%;
}
.mega-card__link:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
.mega-card__media {
display: block;
width: 200px;
height: 200px;
overflow: hidden;
}
.mega-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.mega-card__label {
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.mega-card__link:hover .mega-card__media img {
transform: scale(1.06);
}
.mega-card__link:hover .mega-card__label {
color: #ffe810;
}
}
/* === Mega menus — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Mobile navigation drawer — 1279px and below.
Not in Figma (desktop-only designs), so this is built from the same tokens:
navy panel, yellow accents, accordion sections mirroring the mega menus.
============================================================================= */
.mobile-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: min(420px, 100%);
background-color: #021b3c;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-nav.is-open {
transform: none;
}
.mobile-nav__inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 20px 24px 32px;
}
.mobile-nav {
/* The drawer sits above the header, so it needs its own dismiss control. */
}
.mobile-nav__close {
align-self: flex-end;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -6px -8px 8px 0;
color: #ffffff;
transition: color 0.25s ease, transform 0.25s ease;
}
.mobile-nav__close:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.mobile-nav__close:hover {
color: #ffe810;
transform: rotate(90deg);
}
}
.mobile-nav__close-icon {
width: 16px;
height: 18px;
}
.mobile-nav__list {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav__list--utility {
margin-top: 8px;
}
.mobile-nav__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav {
/* -- section toggle ------------------------------------------------------ */
}
.mobile-nav__toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 16px 0;
color: #ffffff;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
}
.mobile-nav__toggle:focus-visible {
outline: 2px solid #ffe810;
outline-offset: -2px;
}
.mobile-nav__toggle span {
flex: 1;
}
.mobile-nav {
/* The nav icons are blue/yellow artwork built for the white header bar;
on the navy drawer they read as white. */
}
.mobile-nav__icon {
width: 32px;
height: 32px;
flex-shrink: 0;
filter: brightness(0) invert(1);
}
.mobile-nav__caret {
width: 12px;
height: 8px;
flex-shrink: 0;
color: #ffe810;
transition: transform 0.25s ease;
}
.mobile-nav__toggle[aria-expanded=true] .mobile-nav__caret {
transform: rotate(180deg);
}
.mobile-nav {
/* -- collapsible panel ---------------------------------------------------
Animated with grid-template-rows 0fr -> 1fr rather than a max-height that
JavaScript has to measure. A measured height goes stale the moment the
content reflows (a web font landing, an orientation change) and clips the
last item; this always resolves to the real height.
---------------------------------------------------------------------- */
}
.mobile-nav__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.mobile-nav__panel > * {
min-height: 0;
overflow: hidden;
}
.mobile-nav__toggle[aria-expanded=true] + .mobile-nav__panel {
grid-template-rows: 1fr;
}
.mobile-nav {
/* No padding on this element. It is the one the grid row collapses, and
overflow:hidden clips content but NOT padding — 4px+16px here left a 20px
strip open with the first link showing through. Spacing lives on the
items instead, so the closed height is a true zero. */
}
.mobile-nav__sub {
padding: 0;
}
.mobile-nav__sub li {
padding-left: 44px;
}
.mobile-nav__sub li:first-child {
padding-top: 4px;
}
.mobile-nav__sub li:last-child {
padding-bottom: 16px;
}
.mobile-nav__sub li + li {
margin-top: 12px;
}
.mobile-nav__sub a {
color: rgba(255, 255, 255, 0.85);
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
.mobile-nav__sub a:hover {
color: #ffe810;
}
}
.mobile-nav {
/* -- plain links ---------------------------------------------------------- */
}
.mobile-nav__link {
display: block;
padding: 14px 0;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.mobile-nav__link:hover {
color: #ffe810;
}
}
.mobile-nav {
/* -- footer of the drawer ------------------------------------------------- */
}
.mobile-nav__foot {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: auto;
padding-top: 28px;
}
.mobile-nav__foot .header__phone {
margin-left: 0;
color: #ffe810;
}
/* === Mobile nav — end ======================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Home hero — 1920x687 in Figma.
Layers, bottom to top:
.hero__slider Swiper holding the three backgrounds (video + two stills)
.hero__overlay #333 at 40%
.hero__inner heading, copy and search — fixed, does not move with slides
.hero__nav the two thin chevrons
.hero__dots three dashes, active one yellow and wider
The design's media box is 1920x754 shown through a 687px window, so the
images are object-position: bottom to match.
============================================================================= */
.hero {
position: relative;
height: 687px;
overflow: hidden;
background-color: #021b3c;
}
@media (max-width: 1439.98px) {
.hero {
height: 560px;
}
}
@media (max-width: 1023.98px) {
.hero {
height: 480px;
}
}
@media (max-width: 767.98px) {
.hero {
height: auto;
min-height: 460px;
padding-block: 48px;
}
}
.hero {
/* -- background slider --------------------------------------------------- */
}
.hero__slider {
position: absolute;
inset: 0;
}
.hero__slide {
position: relative;
height: 100%;
overflow: hidden;
}
.hero {
/* The stills are much brighter than the video: measured mean luminance is
68 and 116 against the video's 51, so on the shared 40% overlay alone they
washed out. A second 20% pass on the stills only brings all three slides
to roughly the same level without over-darkening the footage. */
}
.hero__slide--image::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.hero__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.hero__overlay {
position: absolute;
inset: 0;
background-color: rgba(51, 51, 51, 0.4);
pointer-events: none;
}
.hero {
/* -- content ------------------------------------------------------------- */
/* Figma insets the hero content to 185px, not the 120px the body container
uses. 185 / 1920 = 9.64%. */
}
.hero__inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
height: 100%;
padding-inline: clamp(16px, 9.64vw, 185px);
}
.hero__content {
display: flex;
flex-direction: column;
gap: 43px;
width: 705px;
max-width: 100%;
color: #ffffff;
}
@media (max-width: 1023.98px) {
.hero__content {
gap: 28px;
}
}
.hero__title {
display: flex;
flex-direction: column;
margin: 0;
color: #ffffff;
text-transform: uppercase;
}
.hero__title-main {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(40px, 4.6vw, 88px);
font-weight: 600;
line-height: 0.91;
}
.hero__title-sub {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(22px, 2.5vw, 48px);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.2;
}
.hero {
/* Figma: 36px between the heading and the paragraph, 43px before the search */
}
.hero__copy {
display: flex;
flex-direction: column;
gap: 36px;
}
@media (max-width: 1023.98px) {
.hero__copy {
gap: 20px;
}
}
.hero__text {
max-width: 675px;
margin: 0;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: clamp(16px, 1.25vw, 24px);
line-height: 1.25;
}
.hero {
/* -- arrows -------------------------------------------------------------- */
}
.hero__nav {
position: absolute;
top: 38.57%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 78px;
color: #ffffff;
opacity: 0.85;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero__nav:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.hero__nav:hover {
opacity: 1;
}
}
.hero__nav--prev {
left: 2.71%;
}
@media (hover: hover) and (pointer: fine) {
.hero__nav--prev:hover {
transform: translateX(-4px);
}
}
.hero__nav--next {
right: 4.9%;
}
@media (hover: hover) and (pointer: fine) {
.hero__nav--next:hover {
transform: translateX(4px);
}
}
.hero__nav--next .hero__nav-icon {
transform: scaleX(-1);
}
@media (max-width: 1023.98px) {
.hero__nav {
width: 28px;
height: 56px;
}
}
@media (max-width: 767.98px) {
.hero__nav {
display: none;
}
}
.hero__nav-icon {
width: 36px;
height: 78px;
}
@media (max-width: 1023.98px) {
.hero__nav-icon {
width: 28px;
height: 56px;
}
}
.hero {
/* -- pagination dashes ---------------------------------------------------
Figma: 32.3px active / 18.7px idle, 10.2px apart, sitting 1653px from the
left edge and 539px down.
---------------------------------------------------------------------- */
/* .hero prefix is deliberate: Swiper's own
.swiper-pagination-bullets.swiper-pagination-horizontal rule is 0-2-0 and
would otherwise force left:0 / width:100% / bottom:8px onto these. */
}
.hero .hero__dots {
position: absolute;
left: auto;
right: 9.2%;
bottom: 145px;
z-index: 3;
display: flex;
width: auto;
align-items: center;
gap: 10px;
/* Swiper makes these real buttons, so they need a real focus ring — a
3px dash is far too small to read a colour change on. */
}
.hero .hero__dots .swiper-pagination-bullet {
width: 19px;
height: 3px;
margin: 0;
background-color: #ffffff;
border-radius: 0;
opacity: 0.8;
cursor: pointer;
transition: width 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
.hero .hero__dots .swiper-pagination-bullet:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 6px;
}
.hero .hero__dots .swiper-pagination-bullet-active {
width: 32px;
background-color: #ffe810;
opacity: 1;
}
@media (max-width: 1023.98px) {
.hero .hero__dots {
bottom: 40px;
right: 6%;
}
}
.hero .hero__dots {
/* stays absolute on mobile: position:static would drop z-index and put the
dashes behind the slider */
}
@media (max-width: 767.98px) {
.hero .hero__dots {
left: 0;
right: 0;
bottom: 20px;
width: 100%;
justify-content: center;
}
}
/* =============================================================================
Hero search — 705x69 white box with the blue Search button sitting inside it.
============================================================================= */
.hero-search {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 705px;
height: 69px;
padding: 10px 12px 10px 20px;
background-color: #ffffff;
border-radius: 6px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
}
.hero-search__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: #333333;
}
.hero-search__input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
}
.hero-search__input::placeholder {
color: #696767;
}
.hero-search__input:focus {
outline: none;
}
.hero-search__submit {
flex-shrink: 0;
height: 51px;
padding-inline: 25px;
background-color: #0c2889;
border-radius: 6px;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.1;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
.hero-search__submit:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.hero-search__submit:hover {
background-color: #ffe810;
color: #000000;
}
}
@media (max-width: 1023.98px) {
.hero-search {
height: 58px;
padding-left: 16px;
}
.hero-search__submit {
height: 44px;
padding-inline: 18px;
}
}
@media (max-width: 575.98px) {
.hero-search__input {
font-size: 14px;
}
.hero-search__submit {
padding-inline: 14px;
font-size: 14px;
}
}
/* === Hero — end ============================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Inner-page hero — photo band with a navy veil, eyebrow and H1.
Shared by every page below the home page. Figma 895:2705 (1920x314).
============================================================================= */
.page-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 314px;
/* Figma sits the text block 12px above centre; this is that offset. */
padding: 0 40px 25px;
background-color: #021b3c;
overflow: hidden;
}
@media (max-width: 1023.98px) {
.page-hero {
height: 240px;
padding-bottom: 16px;
}
}
@media (max-width: 767.98px) {
.page-hero {
height: 190px;
padding-inline: 16px;
}
}
.page-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(10, 34, 62, 0.7);
}
.page-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.page-hero__eyebrow {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
line-height: normal;
margin: 0;
color: #fed326;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.page-hero__eyebrow {
font-size: 18px;
}
}
.page-hero__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 65px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
}
@media (max-width: 1279.98px) {
.page-hero__title {
font-size: 34px;
line-height: 1.35;
}
}
@media (max-width: 767.98px) {
.page-hero__title {
font-size: 24px;
line-height: 1.25;
}
}
/* === Page hero — end ======================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Footer — 1920x835 in Figma.
Note the footer uses a WIDER container than the rest of the site: 96px
gutters and ~1717px of content, where body sections use 120px / 1680px.
That is how it is drawn, so it gets its own width here rather than .container.
Three bands:
1 brand (397px) + 100px gap + five link columns (1204px)
2 integration partners + "Contact us" label + three office blocks
3 copyright / credit
============================================================================= */
/* Everything in this band sits on navy, so the keyboard ring is yellow. The
corporate blue we use elsewhere disappears into the background here. */
.footer :is(a, button):focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
/* footer-only container width, from the Figma frame */
.footer {
background-color: #021b3c;
color: #ffffff;
}
.footer .container {
max-width: 1909px;
padding-inline: 96px;
}
@media (max-width: 1439.98px) {
.footer .container {
padding-inline: 40px;
}
}
@media (max-width: 767.98px) {
.footer .container {
padding-inline: 16px;
}
}
.footer {
/* -- band 1: brand + link columns ---------------------------------------- */
}
.footer__top {
display: grid;
grid-template-columns: 397px 1fr;
gap: 100px;
padding-top: 44px;
padding-bottom: 56px;
}
@media (max-width: 1919.98px) {
.footer__top {
grid-template-columns: 340px 1fr;
gap: 60px;
}
}
@media (max-width: 1439.98px) {
.footer__top {
grid-template-columns: 1fr;
gap: 40px;
}
}
.footer__brand {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.footer__logo {
display: block;
}
.footer__logo img {
width: 100%;
max-width: 397px;
height: auto;
}
@media (hover: hover) and (pointer: fine) {
.footer__logo:hover {
opacity: 0.85;
}
}
.footer__social {
display: flex;
align-items: center;
gap: 24px;
}
.footer__social-label {
color: #c1c1c1;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
}
.footer {
/* -- link columns --------------------------------------------------------
Figma: 152 / 203 / 203 / 203 / 203 with 60px gaps. Products occupies two
of those columns, so it is one section here that splits internally.
---------------------------------------------------------------------- */
}
.footer__nav {
display: grid;
grid-template-columns: 152px minmax(0, 466px) minmax(0, 203px) minmax(0, 203px);
gap: 60px;
}
@media (max-width: 1919.98px) {
.footer__nav {
grid-template-columns: 140px minmax(0, 2fr) 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 1023.98px) {
.footer__nav {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 575.98px) {
.footer__nav {
grid-template-columns: 1fr;
}
}
.footer {
/* -- band 2: partners + offices ------------------------------------------ */
}
.footer__bottom {
display: grid;
grid-template-columns: 373px 114px repeat(3, 242px);
justify-content: space-between;
padding-top: 56px;
padding-bottom: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 1919.98px) {
.footer__bottom {
grid-template-columns: 300px 100px repeat(3, minmax(0, 1fr));
gap: 24px;
}
}
@media (max-width: 1439.98px) {
.footer__bottom {
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 1023.98px) {
.footer__bottom {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 575.98px) {
.footer__bottom {
grid-template-columns: 1fr;
}
}
.footer__partner-list {
display: flex;
align-items: center;
gap: 24px;
margin-top: 22px;
}
.footer__partner-list img {
max-width: 150px;
height: auto;
}
.footer__partner-list a {
display: block;
transition: opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.footer__partner-list a:hover {
opacity: 0.8;
}
}
.footer {
/* -- band 3: copyright --------------------------------------------------- */
}
.footer__base {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 20px 32px;
}
@media (max-width: 767.98px) {
.footer__base {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.footer__copy, .footer__credit {
margin: 0;
color: #c1c1c1;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
}
@media (hover: hover) and (pointer: fine) {
.footer__credit:hover {
color: #ffe810;
}
}
/* -- a single link column ----------------------------------------------------- */
.footer-col__title {
margin-bottom: 20px;
color: #ffe810;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.footer-col {
/* Figma draws these columns as one text block with line breaks: Barlow 16 at
line-height 1.5 and no gap between entries. Real list markup here, same
rhythm — 24px per line either way. */
}
.footer-col__list {
display: flex;
flex-direction: column;
gap: 0;
}
.footer-col {
/* Products spans two of the Figma columns. CSS multi-column rather than a
2-col grid: grid pads every row to its tallest cell, which adds ~75px of
dead space once the longer labels wrap. Columns pack naturally instead. */
}
.footer-col--wide .footer-col__list {
display: block;
columns: 2;
column-gap: 60px;
}
.footer-col--wide .footer-col__list li {
break-inside: avoid;
}
@media (max-width: 1919.98px) {
.footer-col--wide .footer-col__list {
column-gap: 32px;
}
}
@media (max-width: 1023.98px) {
.footer-col--wide .footer-col__list {
columns: 1;
}
}
.footer-col__link {
display: inline-block;
max-width: 186px;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.footer-col__link:hover {
color: #ffe810;
transform: translateX(3px);
}
}
/* -- social icon buttons ------------------------------------------------------ */
.social {
display: flex;
align-items: center;
gap: 11px;
}
.social__link {
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
color: #979696;
transition: color 0.25s ease, transform 0.25s ease;
}
.social__link:focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.social__link:hover {
color: #ffe810;
transform: translateY(-2px);
}
}
.social__icon {
width: 27px;
height: 27px;
}
/* -- one office block ---------------------------------------------------------- */
.office__name {
margin-bottom: 20px;
color: #c1c1c1;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 400;
text-transform: none;
}
.office__row {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.5;
}
.office__row:last-child {
margin-bottom: 0;
}
.office__row a {
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
.office__row a:hover {
color: #ffe810;
}
}
.office__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: #ffe810;
}
/* === Footer — end =========================================================== */
/* -- pages ------------------------------------------------------------------ */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Home page sections.
One block per section, in the order they appear on the page.
============================================================================= */
/* -----------------------------------------------------------------------------
Intro band — the light strip that runs behind the welcome copy and, below it,
the Products / Solutions / Projects tabs (Figma 815:376, one 1554px band).
-------------------------------------------------------------------------- */
.home-intro {
background-color: #fafbfd;
padding-top: 46px;
}
@media (max-width: 1023.98px) {
.home-intro {
padding-top: 32px;
}
}
.home-intro {
/* Figma: 46px between the welcome copy and the tab bar, and the band ends
101px below the panel. */
}
.home-intro__tabs {
padding-bottom: 101px;
}
@media (max-width: 1023.98px) {
.home-intro__tabs {
padding-bottom: 48px;
}
}
/* -----------------------------------------------------------------------------
Welcome — Figma 991:9616. 1428px wide, centred, with the paragraph a little
narrower at 1334px.
-------------------------------------------------------------------------- */
.welcome {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 1428px;
margin-inline: auto;
padding-bottom: 46px;
text-align: center;
/* this heading is black, unlike the blue section titles on the inner pages */
}
.welcome__head .section-head__title {
color: #000000;
}
.welcome {
/* The welcome copy is CMS rich text of any length (the old site's four paragraphs today), so it is
capped the way the product description is: the box is clipped at six lines, a fade marks the cut and
the Read more button shows only when the text really overflows (js-desc in product.js measures it). */
}
.welcome__text {
position: relative;
max-width: 1334px;
max-height: 7.8em;
margin: 0;
overflow: hidden;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: 1.3;
transition: max-height 0.35s ease;
}
.welcome.is-clipped .welcome__text::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 40px;
background: linear-gradient(rgba(250, 251, 253, 0), #fafbfd 85%);
pointer-events: none;
}
.welcome.is-expanded .welcome__text {
max-height: 200em;
}
.welcome__more {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.welcome__more:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.welcome__more:hover {
text-decoration: underline;
}
}
.welcome__more .icon {
width: 10px;
height: 5px;
transition: transform 0.25s ease;
}
.welcome.is-expanded .welcome__more .icon {
transform: rotate(180deg);
}
@media (max-width: 1279.98px) {
.welcome {
gap: 16px;
}
.welcome__text {
font-size: 18px;
}
}
@media (max-width: 1023.98px) {
.welcome {
padding-bottom: 32px;
}
.welcome__text {
font-size: 16px;
line-height: 1.4;
}
}
/* === Home page — end ======================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Home — About + project CTA + value props. Figma 853:1915 (1698x904).
The block is 1698 wide, slightly wider than the 1680 site container, so it
gets its own width. Everything above the navy bar is absolutely positioned
over a single photo; below 1024 it all unstacks into normal flow.
============================================================================= */
.about {
width: 100%;
max-width: 1698px;
margin-inline: auto;
/* -- the photo + wedge + copy + CTA all share one box ---------------------- */
}
.about__stage {
position: relative;
height: 663px;
}
@media (max-width: 1919.98px) {
.about__stage {
height: 34.5vw;
}
}
@media (max-width: 1279.98px) {
.about__stage {
height: auto;
}
}
.about__photo {
position: absolute;
top: 0;
right: 0;
width: 58.3%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1279.98px) {
.about__photo {
position: static;
width: 100%;
height: 300px;
}
}
.about {
/* White wedge over the left of the photo, fading out to the right.
Figma draws it as an SVG polygon with a white → transparent gradient;
the same shape as clip-path keeps it resolution-independent and saves a
request. Points come straight from the path:
M0 0 H1132.29 L714.287 663 H4.287 Z (of a 1132.29 wide box) */
}
.about__wedge {
position: absolute;
top: 0;
left: 0;
width: 66.7%;
height: 100%;
background-image: linear-gradient(to right, #ffffff 64.2%, rgba(255, 255, 255, 0) 98.1%);
clip-path: polygon(0 0, 100% 0, 63.08% 100%, 0.38% 100%);
pointer-events: none;
}
@media (max-width: 1279.98px) {
.about__wedge {
display: none;
}
}
.about {
/* -- copy ---------------------------------------------------------------- */
}
.about__copy {
position: absolute;
top: 83px;
left: 13px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 46px;
width: 649px;
max-width: calc(100% - 26px);
}
@media (max-width: 1919.98px) {
.about__copy {
top: 4.5vw;
gap: 28px;
}
}
@media (max-width: 1279.98px) {
.about__copy {
position: static;
width: 100%;
max-width: none;
gap: 24px;
padding: 32px 16px 0;
}
}
.about {
/* the rule + title pair is the shared .block-head component */
}
.about__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #000000;
}
.about__text p + p {
margin-top: 1.3em;
}
.about__more {
align-self: flex-start;
}
/* -----------------------------------------------------------------------------
"Have a project in mind?" band — a lavender → transparent gradient laid over
the bottom of the photo.
-------------------------------------------------------------------------- */
.project-cta {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 99.8%;
height: 148px;
background-image: linear-gradient(to right, #e4e9f4, rgba(228, 233, 244, 0));
display: flex;
align-items: center;
}
.project-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 714px;
max-width: 100%;
margin-left: 83px;
}
.project-cta__text {
display: flex;
flex-direction: column;
color: #000000;
}
.project-cta__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
.project-cta__sub {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
margin: 0;
line-height: normal;
}
.project-cta__btn {
flex-shrink: 0;
}
@media (max-width: 1919.98px) {
.project-cta__inner {
margin-left: 4.5vw;
}
}
@media (max-width: 1279.98px) {
.project-cta {
position: static;
width: 100%;
height: auto;
padding: 28px 16px;
margin-top: 32px;
background-image: none;
background-color: #e4e9f4;
}
.project-cta__inner {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 767.98px) {
.project-cta__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.project-cta__title {
font-size: 24px;
line-height: 1.2;
}
.project-cta__sub {
font-size: 17px;
}
}
/* -----------------------------------------------------------------------------
Value props — navy bar, four items divided by hairlines.
-------------------------------------------------------------------------- */
.values {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 80px; /* Figma: 40px each side of a 0-width rule */
align-items: start;
min-height: 241px;
/* Figma's group sits 86 from the left and 81 from the right, 63 down and 55
up — not symmetric, and the 5px matters: at 86/86 the "Customer focused"
title loses its last 2px and wraps to a second line, which pushes the whole
bar 27px taller than the design. */
padding: 63px 81px 55px 86px;
background-color: #0c2889;
}
.values__item {
position: relative;
display: flex;
align-items: flex-start;
gap: 22px;
/* hairline centred in the 80px gap */
}
.values__item + .values__item::before {
content: "";
position: absolute;
top: 50%;
left: -40px;
width: 1px;
height: 106px;
background-color: rgba(255, 255, 255, 0.35);
transform: translateY(-50%);
}
.values__icon {
width: 75px;
height: 75px;
flex-shrink: 0;
color: #ffe810;
}
.values__body {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
/* Figma's text group is a fixed 123px (title 32 + gap 16 + body 75). The
slack lives here rather than on .values__text, because ANY height on a
-webkit-box element disables -webkit-line-clamp — Chrome then lays out
every line and just clips, leaving a sliced fourth line on show. */
min-height: 123px;
}
.values__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
}
.values__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
margin: 0;
color: #ffffff;
/* height must stay auto here — see the note on .values__body */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1919.98px) {
.values {
gap: 48px;
padding: 48px 40px;
}
}
@media (max-width: 1439.98px) {
.values {
gap: 32px;
}
.values__icon {
width: 58px;
height: 58px;
}
.values__title {
font-size: 20px;
line-height: 26px;
}
.values__body {
min-height: 0;
}
.values__item {
gap: 16px;
}
.values__item + .values__item::before {
left: -16px;
}
}
@media (max-width: 1279.98px) {
.values {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
padding: 40px 16px;
}
.values__item + .values__item::before {
display: none;
}
}
@media (max-width: 767.98px) {
.values {
grid-template-columns: 1fr;
}
}
/* === Home about / values — end ============================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Home — Our Services + Latest News. Figma 853:1920 (1695x783).
Two 799px columns with a 97px gutter; stacks below 1280.
============================================================================= */
.services-news {
display: grid;
grid-template-columns: repeat(2, minmax(0, 799px));
justify-content: space-between;
gap: 97px;
width: 100%;
/* border-box, so max-width carries the 1695 content plus its gutters — with
content-box, width:100% plus padding overflows the parent by 2x gutter. */
max-width: 1727px;
margin-inline: auto;
padding-block: 100px;
padding-inline: 16px;
}
@media (max-width: 1919.98px) {
.services-news {
gap: 60px;
padding-block: 72px;
}
}
@media (max-width: 1279.98px) {
.services-news {
grid-template-columns: 1fr;
gap: 56px;
padding-block: 56px;
}
}
@media (max-width: 1023.98px) {
.services-news {
padding-block: 40px;
}
}
/* -----------------------------------------------------------------------------
Our services — numbered list, each row a link with a hairline under it.
Named .service-row, not .service: the Services page owns .service as its
page-level block, and a bare .service here inherited its section padding.
-------------------------------------------------------------------------- */
.services__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 60px;
}
@media (max-width: 1023.98px) {
.services__list {
margin-top: 32px;
}
}
.service-row__link {
display: flex;
align-items: flex-start;
gap: 17px;
padding-bottom: 20px;
border-bottom: 1px solid #0c2889;
transition: background-color 0.25s ease;
}
.service-row__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -2px;
}
.service-row__num {
width: 73px;
flex-shrink: 0;
padding-left: 10px;
color: #0c2889;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 65px;
transition: color 0.25s ease;
}
@media (max-width: 767.98px) {
.service-row__num {
width: 52px;
padding-left: 0;
font-size: 30px;
line-height: 44px;
}
}
.service-row__body {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 5px;
min-width: 0;
flex: 1;
}
.service-row__head {
display: flex;
align-items: flex-start;
gap: 17px;
padding-right: 10px;
}
.service-row__title {
flex: 1;
color: #000000;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
transition: color 0.25s ease;
}
@media (max-width: 767.98px) {
.service-row__title {
font-size: 19px;
}
}
.service-row__arrow {
width: 16px;
height: 16px;
margin-top: 6px;
flex-shrink: 0;
color: #0c2889;
transition: transform 0.25s ease;
}
.service-row {
/* Figma gives the blurb a fixed 47px box holding two clamped lines. The 5px
of slack is a margin, not a height — a height would disable the clamp. */
}
.service-row__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
margin-bottom: 5px;
color: #000000;
transition: color 0.25s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-row {
/* Hover state is a design variant (Figma 835:264), not an invention: the whole
row fills with the corporate blue, the number goes bright yellow, the title
and blurb go white, and the arrow takes the softer yellow. */
}
@media (hover: hover) and (pointer: fine) {
.service-row__link:hover {
background-color: #0c2889;
}
.service-row__link:hover .service-row__num {
color: #ffe810;
}
.service-row__link:hover .service-row__title {
color: #ffffff;
}
.service-row__link:hover .service-row__text {
color: #ffffff;
}
.service-row__link:hover .service-row__arrow {
color: #fed326;
transform: translateX(5px);
}
}
/* -----------------------------------------------------------------------------
Latest news — one featured card over two compact rows.
-------------------------------------------------------------------------- */
.news__subtitle {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
margin: 15px 0 0;
color: #000000;
}
.news__list {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 45px;
}
@media (max-width: 1023.98px) {
.news__list {
margin-top: 28px;
}
}
.news-featured {
position: relative;
display: block;
aspect-ratio: 794/375;
overflow: hidden;
}
.news-featured:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -3px;
}
.news-featured__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-featured {
/* the 40% navy veil that keeps the title legible */
}
.news-featured::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(2, 27, 60, 0.4);
}
.news-featured__body {
position: absolute;
left: 28px;
right: 28px;
bottom: 28px;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.news-featured__tag {
padding: 2px 12px;
background-color: #fed326;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
line-height: 24px;
text-transform: uppercase;
}
.news-featured__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
}
.news-featured__title {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #ffffff;
text-transform: uppercase;
}
.news-featured__arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #fed326;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.news-featured:hover .news-featured__img {
transform: scale(1.04);
}
.news-featured:hover .news-featured__arrow {
transform: translateX(5px);
}
}
@media (max-width: 767.98px) {
.news-featured__body {
left: 16px;
right: 16px;
bottom: 16px;
}
.news-featured__title {
font-size: 18px;
line-height: 24px;
}
.news-featured__tag {
font-size: 15px;
}
}
.news-item {
display: flex;
align-items: center;
gap: 33px;
}
.news-item:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.news-item__media {
display: block;
width: 210px;
height: 127px;
flex-shrink: 0;
overflow: hidden;
}
.news-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-item__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.news-item__date {
color: #c1c1c1;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.news-item__title {
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: normal;
transition: color 0.25s ease;
}
.news-item__more {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #0c2889;
}
@media (hover: hover) and (pointer: fine) {
.news-item:hover .news-item__media img {
transform: scale(1.05);
}
.news-item:hover .news-item__title {
color: #0c2889;
}
.news-item:hover .news-item__more {
text-decoration: underline;
}
}
@media (max-width: 767.98px) {
.news-item {
gap: 16px;
}
.news-item__media {
width: 130px;
height: 88px;
}
.news-item__title {
font-size: 17px;
}
.news-item__date, .news-item__more {
font-size: 14px;
}
}
/* === Home services / news — end ============================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Home — partners carousel. Figma 943:2765 (1774x172).
Heading, then a 1616px track of 235x75 logos with a thin chevron each side.
============================================================================= */
.partners {
display: flex;
flex-direction: column;
align-items: center;
gap: 39px;
width: 100%;
max-width: 1774px;
margin-inline: auto;
padding: 0 16px 20px;
}
@media (max-width: 1023.98px) {
.partners {
gap: 24px;
}
}
.partners__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.partners__title {
font-size: 24px;
line-height: 1.2;
}
}
.partners__inner {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
}
.partners__slider {
flex: 1;
min-width: 0;
}
.partners__slide {
display: flex;
align-items: center;
justify-content: center;
height: 75px;
}
.partners__link {
display: block;
width: 100%;
max-width: 235px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.partners__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.partners__link img {
width: 100%;
height: 75px;
object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
.partners__link:hover {
opacity: 0.75;
transform: translateY(-2px);
}
}
.partners {
/* -- arrows -------------------------------------------------------------- */
}
.partners__nav {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 78px;
flex-shrink: 0;
color: #0c2889;
opacity: 0.85;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.partners__nav:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.partners__nav:hover {
opacity: 1;
}
}
@media (hover: hover) and (pointer: fine) {
.partners__nav--prev:hover {
transform: translateX(-4px);
}
}
@media (hover: hover) and (pointer: fine) {
.partners__nav--next:hover {
transform: translateX(4px);
}
}
.partners__nav--next .partners__nav-icon {
transform: scaleX(-1);
}
.partners__nav.swiper-button-disabled {
opacity: 0.25;
pointer-events: none;
}
@media (max-width: 767.98px) {
.partners__nav {
width: 22px;
height: 48px;
}
}
.partners__nav-icon {
width: 36px;
height: 78px;
}
@media (max-width: 767.98px) {
.partners__nav-icon {
width: 22px;
height: 48px;
}
}
/* === Home partners — end ==================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
About Us — Figma 886:1296.
Five bands, top to bottom:
.about-intro breadcrumb + "Who we are" text/photo pair
.mvv mission / vision / values over a photo
.why-choose five reasons on the corporate blue
.expertise intro column + four 200x200 category cards
.info-pair "Our history" and "Community involvement" side by side
============================================================================= */
/* -----------------------------------------------------------------------------
Who we are — 722px of copy, a 128px gutter, an 830x556 photo.
-------------------------------------------------------------------------- */
.about-intro {
padding-block: 9px 77px;
}
@media (max-width: 1279.98px) {
.about-intro {
padding-bottom: 56px;
}
}
@media (max-width: 767.98px) {
.about-intro {
padding-bottom: 40px;
}
}
.about-intro__body {
display: grid;
grid-template-columns: 722px 830px;
justify-content: space-between;
gap: 128px;
margin-top: 26px;
}
@media (max-width: 1919.98px) {
.about-intro__body {
grid-template-columns: minmax(0, 722fr) minmax(0, 830fr);
gap: 80px;
}
}
@media (max-width: 1279.98px) {
.about-intro__body {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
}
.about-intro__text {
display: flex;
flex-direction: column;
gap: 36px;
/* Figma nudges the copy 7px below the top of the photo. */
padding-top: 7px;
}
@media (max-width: 767.98px) {
.about-intro__text {
gap: 24px;
}
}
.about-intro__copy {
display: flex;
flex-direction: column;
gap: 36px;
}
@media (max-width: 767.98px) {
.about-intro__copy {
gap: 24px;
}
}
.about-intro__media {
/* 830x556 in Figma; holds that ratio as the column narrows. */
aspect-ratio: 830/556;
overflow: hidden;
}
.about-intro__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1279.98px) {
.about-intro__media {
order: -1;
}
}
/* A blue rule down the left of a callout — Figma "Benefits Section". */
.callout {
display: flex;
flex-direction: column;
gap: 18px;
padding-left: 40px;
border-left: 4px solid #0c2889;
}
@media (max-width: 767.98px) {
.callout {
padding-left: 24px;
}
}
.callout__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
line-height: normal;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.callout__title {
font-size: 20px;
}
}
/* -----------------------------------------------------------------------------
Mission / vision / values — three white cards over the plant photo.
-------------------------------------------------------------------------- */
.mvv {
position: relative;
padding: 208px 40px 199px;
background-color: #021b3c;
overflow: hidden;
}
@media (max-width: 1919.98px) {
.mvv {
padding-block: 120px;
}
}
@media (max-width: 1279.98px) {
.mvv {
padding-block: 80px;
}
}
@media (max-width: 767.98px) {
.mvv {
padding: 56px 16px;
}
}
.mvv__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mvv {
/* Figma "Mission Background Container" — the same navy veil as the page hero,
at 60% instead of 70%. Paints over __bg and under __inner. */
}
.mvv::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(10, 34, 62, 0.6);
}
.mvv__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1681px;
margin-inline: auto;
}
.mvv__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 65px;
margin: 0 0 60px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
}
@media (max-width: 1279.98px) {
.mvv__title {
margin-bottom: 40px;
font-size: 32px;
line-height: 1.3;
}
}
@media (max-width: 767.98px) {
.mvv__title {
font-size: 24px;
}
}
.mvv__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 1279.98px) {
.mvv__grid {
grid-template-columns: minmax(0, 1fr);
max-width: 547px;
margin-inline: auto;
}
}
.mvv-card {
display: flex;
flex-direction: column;
align-items: center;
height: 342px;
padding: 63px 40px 30px;
background-color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
text-align: center;
}
@media (max-width: 1023.98px) {
.mvv-card {
height: auto;
padding: 48px 24px 40px;
}
}
.mvv-card {
/* Figma sets the three icons at slightly different heights; a fixed band
lines them up without moving any of the type below. */
}
.mvv-card__icon-band {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
margin-bottom: 19px;
color: #0c2889;
}
.mvv-card__icon {
display: block;
fill: currentColor;
}
.mvv-card__icon--mission {
width: 50px;
height: 60px;
}
.mvv-card__icon--vision {
width: 75px;
height: 40px;
}
.mvv-card__icon--values {
width: 79px;
height: 50px;
}
.mvv-card__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
line-height: normal;
margin: 0 0 18px;
color: #333333;
text-transform: uppercase;
}
.mvv-card__text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
line-height: normal;
max-width: 398px;
color: #000000;
}
.mvv-card {
/* Values reads as two bullet columns; five items split 3 / 2. */
}
.mvv-card__list {
columns: 2;
column-gap: 40px;
max-width: 360px;
padding-left: 20px;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: normal;
list-style: disc;
text-align: left;
}
.mvv-card__list li {
break-inside: avoid;
}
/* -----------------------------------------------------------------------------
Why choose — five reasons with hairline dividers between them.
-------------------------------------------------------------------------- */
.why-choose {
padding: 72px 40px 96px;
background-color: #0c2889;
color: #ffffff;
}
@media (max-width: 1279.98px) {
.why-choose {
padding-block: 56px 64px;
}
}
@media (max-width: 767.98px) {
.why-choose {
padding: 40px 16px 48px;
}
}
.why-choose__inner {
width: 100%;
max-width: 1681px;
margin-inline: auto;
}
.why-choose {
/* color:inherit, not $c-white — headings default to $c-heading, which is the
same blue as this band, and they would vanish into it. */
}
.why-choose__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 65px;
margin: 0 0 24px;
color: inherit;
text-align: center;
text-transform: uppercase;
}
@media (max-width: 1279.98px) {
.why-choose__title {
font-size: 32px;
line-height: 1.3;
}
}
@media (max-width: 767.98px) {
.why-choose__title {
font-size: 24px;
}
}
.why-choose__intro {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
max-width: 1038px;
margin: 0 auto 60px;
text-align: center;
}
@media (max-width: 1279.98px) {
.why-choose__intro {
margin-bottom: 40px;
}
}
.why-choose__items {
/* 6.25vw resolves to the designed 120px at 1920 and eases down from there.
The floor keeps every column at least 200px, which is what the longest
title needs on two lines; below 1440 the row drops to three. */
--wc-gap: clamp(90px, 6.25vw, 120px);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--wc-gap);
max-width: 1545px;
margin-inline: auto;
}
@media (max-width: 1439.98px) {
.why-choose__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 48px 40px;
}
}
@media (max-width: 767.98px) {
.why-choose__items {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
}
}
.why-choose__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* Decorative hairline in the gutter to the left. Drawn only while the row
is five across — once the grid wraps it would hang off a row start. */
}
.why-choose__item:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: calc(var(--wc-gap) / -2);
width: 1px;
height: 140px;
background-color: #6a7c93;
transform: translateY(-50%);
}
@media (max-width: 1439.98px) {
.why-choose__item:not(:first-child)::before {
content: none;
}
}
.why-choose {
/* Barlow, sentence case — h1-h3 default to Oxanium uppercase, so both have
to be turned off here.
Two lines' worth of min-height keeps the yellow rules on one line across
all five columns; Figma gets there by hand-breaking "End-to-End Support". */
}
.why-choose__item-title {
min-height: 64px;
margin: 0 0 8px;
color: inherit;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 32px;
text-transform: none;
/* three across: still two lines' worth, so the rules stay on one line
whether or not a given title wraps at the current width */
}
@media (max-width: 1439.98px) {
.why-choose__item-title {
min-height: 56px;
font-size: 20px;
line-height: 28px;
}
}
@media (max-width: 767.98px) {
.why-choose__item-title {
min-height: 0;
}
}
.why-choose__rule {
display: block;
width: 77px;
height: 4px;
margin-bottom: 30px;
background-color: #ffe810;
}
@media (max-width: 1279.98px) {
.why-choose__rule {
margin-bottom: 20px;
}
}
.why-choose__item-text {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
}
/* -----------------------------------------------------------------------------
Our expertise — a 220px intro column beside four category cards.
-------------------------------------------------------------------------- */
.expertise {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
align-items: center;
gap: 58px;
padding-block: 78px 106px;
}
@media (max-width: 1279.98px) {
.expertise {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
padding-block: 56px 64px;
}
}
@media (max-width: 767.98px) {
.expertise {
padding-block: 40px 48px;
}
}
.expertise__intro {
display: flex;
flex-direction: column;
gap: 32px;
}
@media (max-width: 1279.98px) {
.expertise__intro {
gap: 16px;
}
}
/* -----------------------------------------------------------------------------
Our history + Community involvement — a matched pair under a blue rule.
-------------------------------------------------------------------------- */
.info-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
padding-block: 72px 83px;
border-top: 1px solid #0c2889;
}
@media (max-width: 1023.98px) {
.info-pair {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
padding-block: 48px 56px;
}
}
.info-pair__col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
@media (max-width: 767.98px) {
.info-pair__col {
gap: 24px;
}
}
.info-pair__media {
display: block;
width: 100%;
height: 304px;
overflow: hidden;
}
.info-pair__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
.info-pair__media:hover img {
transform: scale(1.04);
}
}
@media (max-width: 767.98px) {
.info-pair__media {
height: 220px;
}
}
/* === About — end ============================================================ */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Company History — Figma 895:2708.
.history-intro centred rule + two-tone headline + centred copy
.timeline-band light band holding the timeline beside a photo column
.timeline six year entries, ring marker + year + title + copy
.photo-stack three 544x325 photos down the right
============================================================================= */
.history-intro {
padding-block: 9px 12px;
}
@media (max-width: 1279.98px) {
.history-intro {
padding-bottom: 32px;
}
}
.history-intro__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 40px;
}
@media (max-width: 767.98px) {
.history-intro__inner {
margin-top: 24px;
}
}
.history-intro__text {
text-align: center;
}
@media (max-width: 767.98px) {
.history-intro__text {
text-align: left;
}
}
/* -----------------------------------------------------------------------------
Timeline band — the timeline column is inset 138px from the container edge;
the photo column is flush with its right.
-------------------------------------------------------------------------- */
.timeline-band {
padding-block: 101px 103px;
background-color: #fafbfd;
}
@media (max-width: 1279.98px) {
.timeline-band {
padding-block: 64px;
}
}
@media (max-width: 767.98px) {
.timeline-band {
padding-block: 48px;
}
}
.timeline-band {
/* Both the 138px inset and the 544px photo column are fluid: held at their
Figma sizes at 1920 and eased down, so the timeline copy keeps its measure
instead of being squeezed against a fixed column. */
}
.timeline-band__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(320px, 28.3vw, 544px);
gap: 20px;
padding-left: clamp(0px, 21.5vw - 275px, 138px);
}
@media (max-width: 1279.98px) {
.timeline-band__layout {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
padding-left: 0;
}
}
.timeline {
display: flex;
flex-direction: column;
gap: 68px;
}
@media (max-width: 1023.98px) {
.timeline {
gap: 48px;
}
}
@media (max-width: 767.98px) {
.timeline {
gap: 36px;
}
}
.timeline-entry {
display: flex;
align-items: flex-start;
gap: 73px;
}
@media (max-width: 1023.98px) {
.timeline-entry {
gap: 48px;
}
}
@media (max-width: 767.98px) {
.timeline-entry {
flex-direction: column;
gap: 14px;
}
}
.timeline-entry__marker {
display: flex;
align-items: center;
gap: 23px;
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.timeline-entry__marker {
gap: 14px;
}
}
.timeline-entry {
/* Figma draws this as a 35px SVG: a ringed circle with a solid centre. Two
nested shapes in CSS, so it takes the corporate blue from the token. */
}
.timeline-entry__dot {
position: relative;
width: 35px;
height: 35px;
flex-shrink: 0;
border: 2.6px solid #0c2889;
border-radius: 50%;
background-color: #f6f6f8;
}
.timeline-entry__dot::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background-color: #0c2889;
}
@media (max-width: 767.98px) {
.timeline-entry__dot {
width: 26px;
height: 26px;
border-width: 2px;
}
.timeline-entry__dot::after {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
}
}
.timeline-entry__year {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
width: 175px;
color: #0c2889;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.timeline-entry__year {
width: auto;
font-size: 24px;
line-height: 1.2;
}
}
.timeline-entry__body {
display: flex;
flex-direction: column;
gap: 17px;
/* Five of the six entries measure 583 in Figma; the sixth is a stray. */
max-width: 583px;
}
@media (max-width: 767.98px) {
.timeline-entry__body {
gap: 10px;
}
}
.timeline-entry__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
line-height: normal;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.timeline-entry__title {
font-size: 19px;
}
}
/* -----------------------------------------------------------------------------
Photo column — three fixed 325px frames, side by side once it drops below
the timeline.
-------------------------------------------------------------------------- */
.photo-stack {
display: flex;
flex-direction: column;
gap: 20px;
/* Three across only while there is room for it; below a tablet a 211px-wide
frame is too small to read, so they go back to full width. */
}
@media (max-width: 1279.98px) {
.photo-stack {
flex-direction: row;
}
}
@media (max-width: 1023.98px) {
.photo-stack {
flex-direction: column;
}
}
.photo-stack {
/* aspect-ratio rather than a height, so the frames keep Figma's 544x325 shape
whether they are stacked in the column or sitting three across. */
}
.photo-stack__item {
aspect-ratio: 544/325;
overflow: hidden;
}
@media (max-width: 1279.98px) {
.photo-stack__item {
flex: 1;
min-width: 0;
}
}
.photo-stack__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
@media (hover: hover) and (pointer: fine) {
.photo-stack__item:hover img {
transform: scale(1.04);
}
}
/* === Company History — end ================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Community Involvement — Figma 904:1351.
A 774px copy column beside an 841px column of two quote cards and a photo
collage.
.community the two-column shell
.support-list yellow tick + organisation name
.quote-card lavender / corporate-blue statement blocks
.collage four photos in two uneven rows
============================================================================= */
.community {
/* 9px above the breadcrumb, 65px below it — the breadcrumb sits inside the
container, so the gap under it belongs to the layout, not this padding. */
padding-block: 9px 60px;
}
@media (max-width: 767.98px) {
.community {
padding-bottom: 40px;
}
}
.community__layout {
display: grid;
grid-template-columns: minmax(0, 774fr) minmax(0, 841fr);
gap: 65px;
margin-top: 65px;
}
@media (max-width: 1279.98px) {
.community__layout {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}
}
@media (max-width: 767.98px) {
.community__layout {
margin-top: 32px;
}
}
.community__main {
display: flex;
flex-direction: column;
gap: 24px;
}
.community__body {
display: flex;
flex-direction: column;
gap: 60px;
}
@media (max-width: 1023.98px) {
.community__body {
gap: 40px;
}
}
@media (max-width: 767.98px) {
.community__body {
gap: 28px;
}
}
.community {
/* Barlow Bold 24/32, uppercase — the standfirst under the headline. */
}
.community__lead {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.community__lead {
font-size: 19px;
line-height: 26px;
}
}
.community__intro {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
line-height: normal;
max-width: 757px;
color: #000000;
}
.community__aside {
display: flex;
flex-direction: column;
gap: 23px;
}
/* -----------------------------------------------------------------------------
Supported organisations.
-------------------------------------------------------------------------- */
.support-list {
display: flex;
flex-direction: column;
gap: 11px;
/* Figma's row is 42 tall because the checkmark slot is taller than the 32px
text line; without it the rows close up and the list loses 100px. */
}
.support-list__item {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 42px;
}
@media (max-width: 767.98px) {
.support-list__item {
min-height: 0;
}
}
.support-list {
/* Centred on the label's first line (32/28/24px), not on a wrapped block. */
}
.support-list__icon {
width: 26px;
height: 26px;
/* Figma reserves a 39x42 slot for a 25.5px glyph. */
margin-inline: 6px;
margin-top: 3px;
flex-shrink: 0;
color: #fed326;
}
@media (max-width: 1023.98px) {
.support-list__icon {
margin-top: 1px;
}
}
@media (max-width: 767.98px) {
.support-list__icon {
width: 20px;
height: 20px;
margin-inline: 2px;
margin-top: 2px;
}
}
.support-list__label {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: #000000;
}
@media (max-width: 1023.98px) {
.support-list__label {
font-size: 20px;
line-height: 28px;
}
}
@media (max-width: 767.98px) {
.support-list__label {
font-size: 17px;
line-height: 24px;
}
}
/* -----------------------------------------------------------------------------
Quote cards — the two stack flush against each other, no gap.
-------------------------------------------------------------------------- */
.quote-card {
position: relative;
min-height: 207px;
padding: 49px 86px 23px 74px;
}
@media (max-width: 1023.98px) {
.quote-card {
min-height: 0;
padding: 32px 32px 32px 40px;
}
}
@media (max-width: 767.98px) {
.quote-card {
padding: 24px;
}
}
.quote-card--light {
background-color: #e4e9f4;
color: #0c2889;
/* clears the quote mark sitting above the first line */
padding-top: 76px;
}
@media (max-width: 1023.98px) {
.quote-card--light {
padding-top: 60px;
}
}
.quote-card--dark {
background-color: #0c2889;
color: #ffffff;
}
.quote-card {
/* Figma sets this in Pangolin; Oxanium's double-quote is the same pair of
slanted bars and is already loaded, so no extra font for one glyph. */
}
.quote-card__mark {
position: absolute;
top: 40px;
left: 68px;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 62px;
font-weight: 700;
line-height: 1;
}
@media (max-width: 1023.98px) {
.quote-card__mark {
top: 24px;
left: 36px;
font-size: 46px;
}
}
@media (max-width: 767.98px) {
.quote-card__mark {
left: 22px;
top: 18px;
}
}
.quote-card__text {
max-width: 680px;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: 36px;
}
.quote-card__text strong {
font-weight: 600;
}
@media (max-width: 767.98px) {
.quote-card__text {
font-size: 17px;
line-height: 28px;
}
}
/* -----------------------------------------------------------------------------
Photo collage — two rows of uneven pairs, 840 wide in Figma. Each row carries
the aspect ratio so both cells share a height at any width.
-------------------------------------------------------------------------- */
.collage {
display: flex;
flex-direction: column;
gap: 20px;
}
.collage__row {
display: grid;
gap: 20px;
}
.collage__row--a {
grid-template-columns: minmax(0, 239fr) minmax(0, 581fr);
aspect-ratio: 840/272;
}
.collage__row--b {
grid-template-columns: minmax(0, 585fr) minmax(0, 235fr);
aspect-ratio: 840/385;
}
.collage__row {
/* On a phone the uneven pairs squeeze the narrow photo down to ~90px, so
the collage unstacks into four full-width frames instead. */
}
@media (max-width: 767.98px) {
.collage__row--a, .collage__row--b {
grid-template-columns: minmax(0, 1fr);
aspect-ratio: auto;
}
}
.collage__item {
overflow: hidden;
}
@media (max-width: 767.98px) {
.collage__item {
aspect-ratio: 16/10;
}
}
.collage__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
@media (hover: hover) and (pointer: fine) {
.collage__item:hover img {
transform: scale(1.05);
}
}
/* === Community Involvement — end ============================================ */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Products hub — Figma 1036:10196.
No hero on this page: it opens straight into a centred headline, then a
seven-across grid of category cards, then closing copy.
============================================================================= */
.products-hub {
padding-block: 44px 109px;
}
@media (max-width: 1279.98px) {
.products-hub {
padding-block: 32px 64px;
}
}
.products-hub__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
}
.products-hub {
/* Seven across only at the design width. .tab-cards steps 6 -> 4 -> 3 -> 2 for
the home tabs, which is too abrupt for 20 cards, so the whole chain is
restated here rather than inheriting a partial one. */
}
.products-hub__grid {
margin-top: 64px;
}
@media (max-width: 1919.98px) {
.products-hub__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 1439.98px) {
.products-hub__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width: 1279.98px) {
.products-hub__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 40px;
}
}
@media (max-width: 1023.98px) {
.products-hub__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.products-hub__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.products-hub__outro {
margin-top: 105px;
}
@media (max-width: 1279.98px) {
.products-hub__outro {
margin-top: 56px;
}
}
@media (max-width: 767.98px) {
.products-hub__outro {
margin-top: 40px;
}
}
.products-hub__cta {
margin-top: 31px;
}
/* === Products hub — end ===================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Product category listing — Figma 904:1751.
A 280px sidebar beside a 1340px column: breadcrumb, headline, intro copy,
then a four-across grid of product cards.
============================================================================= */
.category {
padding-block: 51px 60px;
}
@media (max-width: 1279.98px) {
.category {
padding-block: 32px 48px;
}
}
.category__layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 59px;
}
@media (max-width: 1439.98px) {
.category__layout {
gap: 40px;
}
}
@media (max-width: 1279.98px) {
.category__layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
.category__head {
margin-top: 22px;
}
.category__intro {
margin-top: 23px;
}
.category__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 40px;
}
@media (max-width: 1439.98px) {
.category__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023.98px) {
.category__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.category__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.category__outro {
margin-top: 39px;
}
/* === Product category — end ================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Product single — Figma 904:3615.
Sidebar, then a 600px gallery beside a 700px info column: header, clamped
description, Specs/Features tabs, brochure link and the modifications
accordion. Related products and the CTA close the page.
============================================================================= */
.product {
padding-block: 51px 60px;
}
@media (max-width: 1279.98px) {
.product {
padding-block: 32px 48px;
}
}
.product__layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 51px;
}
@media (max-width: 1439.98px) {
.product__layout {
gap: 40px;
}
}
@media (max-width: 1279.98px) {
.product__layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
.product__main {
display: flex;
flex-direction: column;
gap: 46px;
}
@media (max-width: 1023.98px) {
.product__main {
gap: 32px;
}
}
.product {
/* gallery beside info; stacks on a tablet.
align-items:start is what lets the gallery stick — a stretched grid item is
already as tall as the row and has nothing to scroll within. */
}
.product__top {
display: grid;
grid-template-columns: minmax(0, 600fr) minmax(0, 700fr);
align-items: start;
gap: 56px;
margin-top: 18px;
}
@media (max-width: 1439.98px) {
.product__top {
gap: 36px;
}
}
@media (max-width: 1023.98px) {
.product__top {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
/* -----------------------------------------------------------------------------
Media gallery.
-------------------------------------------------------------------------- */
.gallery {
display: flex;
flex-direction: column;
gap: 15.4px;
/* The info column runs much longer than the gallery, so the image follows
the reader down instead of leaving a tall gap. Clears the compact header.
Only while the two columns sit side by side. */
}
@media (min-width: 1024px) {
.gallery {
position: sticky;
top: 116px;
}
}
.gallery {
/* The Swiper containers need a width to resolve against; without min-width:0
a flex/grid child sizes to its content and the slider grows unbounded. */
}
.gallery__main, .gallery__thumbs {
width: 100%;
min-width: 0;
}
.gallery__main {
position: relative;
border: 1px solid #000000;
cursor: zoom-in;
}
.gallery {
/* .slider-nav carries the look; this only places the two inside the frame. */
}
.gallery__nav {
position: absolute;
top: 50%;
z-index: 2;
margin-top: -20px;
}
.gallery__nav--prev {
left: 12px;
}
.gallery__nav--next {
right: 12px;
}
@media (max-width: 767.98px) {
.gallery__nav {
margin-top: -17px;
}
}
.gallery {
/* Every photo sits in the same square frame (the design's 1200×1200 slot) and is never cropped:
products of different shapes no longer change the height of the gallery. */
}
.gallery__slide {
aspect-ratio: 1;
background: #ffffff;
}
.gallery__slide a {
display: block;
width: 100%;
height: 100%;
}
.gallery__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery {
/* Figma sizes the strip at 374 with three across; more images than that and
the strip scrolls rather than shrinking the thumbnails. */
}
.gallery__thumbs {
max-width: 374px;
}
.gallery {
/* The flex basis is only for the moment before Swiper assigns inline widths:
without it a slide sizes to its image's intrinsic width, so a product with
one photo flashes a 240px thumbnail. Swiper overrides this once running. */
}
.gallery__thumb {
flex: 0 0 calc((100% - 23.2px) / 3);
max-width: calc((100% - 23.2px) / 3);
aspect-ratio: 1;
background: #ffffff;
/* 0.772px in Figma; the active state swaps to a 2px blue edge, so both are
declared as border and the box never shifts */
border: 2px solid #e4e9f4;
overflow: hidden;
cursor: pointer;
transition: border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.gallery__thumb:hover {
border-color: #006bb6;
}
}
.gallery__thumb {
/* Swiper's thumbs module sets this on the slide matching the main image. */
}
.gallery__thumb.swiper-slide-thumb-active {
border-color: #0c2889;
}
.gallery__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* -----------------------------------------------------------------------------
Info column.
-------------------------------------------------------------------------- */
.product-info {
display: flex;
flex-direction: column;
gap: 32px;
}
.product-info__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 767.98px) {
.product-info__head {
flex-direction: column;
gap: 16px;
}
}
.product-info__titles {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 448px;
}
.product-info {
/* Oxanium, uppercase — matches the h1-h3 default, so nothing to turn off. */
}
.product-info__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #173453;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.product-info__title {
font-size: 24px;
line-height: 1.2;
}
}
.product-info__category {
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: normal;
}
.product-info__add {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 54px;
flex-shrink: 0;
padding: 16px 15px;
background-color: #0c2889;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: normal;
cursor: pointer;
transition: background-color 0.25s ease;
}
.product-info__add:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.product-info__add:hover {
background-color: #021b3c;
}
}
.product-info__add.is-added {
background-color: #006bb6;
pointer-events: none;
}
.product-info__add .icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.product-info__desc {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.product-info {
/* The description is CMS rich text, so it may hold several paragraphs, a
list, a heading — anything. -webkit-line-clamp cannot be used here: it
clamps a single block of text, and applied to the children it would clamp
each one separately. So the container is capped instead and a fade marks
the cut, which works whatever the markup turns out to be.
.is-clipped is set by JS only when the content really does overflow, so a
short description gets no fade and no Read more button. */
}
.product-info__desc-text {
position: relative;
max-height: 75px;
overflow: hidden;
color: #4f4f4f;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
transition: max-height 0.35s ease;
}
.product-info__desc-text > * + * {
margin-top: 1em;
}
.product-info__desc-text ul, .product-info__desc-text ol {
padding-left: 1.25em;
}
.product-info__desc-text ul {
list-style: disc;
}
.product-info__desc-text ol {
list-style: decimal;
}
.product-info__desc-text li + li {
margin-top: 0.3em;
}
.product-info__desc-text strong, .product-info__desc-text b {
font-weight: 600;
}
.product-info__desc-text a {
color: #0c2889;
text-decoration: underline;
text-underline-offset: 2px;
}
.product-info__desc-text h3, .product-info__desc-text h4 {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: #173453;
text-transform: none;
}
.product-info__desc.is-clipped .product-info__desc-text::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 30px;
background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 85%);
pointer-events: none;
}
.product-info {
/* max-height rather than height:auto so the open/close can transition; the
cap is simply far past any realistic description. */
}
.product-info__desc.is-expanded .product-info__desc-text {
max-height: 100em;
}
.product-info__more {
display: inline-flex;
align-items: center;
gap: 5px;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
letter-spacing: 0.28px;
cursor: pointer;
}
.product-info__more:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.product-info__more:hover {
text-decoration: underline;
}
}
.product-info__more .icon {
width: 10px;
height: 5px;
transition: transform 0.25s ease;
}
.product-info__desc.is-expanded .product-info__more .icon {
transform: rotate(180deg);
}
.product-info__lower {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 43px;
}
@media (max-width: 767.98px) {
.product-info__lower {
gap: 32px;
}
}
/* -----------------------------------------------------------------------------
Specs / Features — pill tabs over a striped table. Runs on the shared
js-tabs, so the keyboard behaviour is the same as the home page tabs.
-------------------------------------------------------------------------- */
.spec-tabs {
display: flex;
flex-direction: column;
gap: 36px;
width: 100%;
}
.spec-tabs__bar {
display: flex;
gap: 14px;
}
.spec-tabs__tab {
padding: 8px 16px;
background-color: transparent;
border: 1px solid #0c2889;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
line-height: 24px;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
.spec-tabs__tab:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.spec-tabs__tab:hover {
background-color: #e4e9f4;
}
}
.spec-tabs__tab.is-active {
background-color: #0c2889;
color: #ffffff;
}
.spec-tabs__panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.spec-tabs__panel[hidden] {
display: none;
}
.spec-tabs__title {
margin: 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
}
.spec-table {
width: 100%;
border: 1px solid #e4e9f4;
border-collapse: collapse;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
color: #000000;
text-align: left;
}
.spec-table tr {
background-color: #ffffff;
}
.spec-table tr:nth-child(odd) {
background-color: #fafbfd;
}
.spec-table th,
.spec-table td {
padding: 12px 16px;
border-bottom: 1px solid #e4e9f4;
font-weight: 400;
vertical-align: top;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td {
border-bottom: 0;
}
.spec-table th {
width: 240px;
}
@media (max-width: 575.98px) {
.spec-table th, .spec-table td {
display: block;
}
.spec-table th {
width: auto;
padding-bottom: 0;
font-weight: 600;
}
.spec-table td {
padding-top: 4px;
}
}
/* -----------------------------------------------------------------------------
Brochure download.
-------------------------------------------------------------------------- */
.brochure-link {
display: inline-flex;
align-items: center;
gap: 9.4px;
height: 46px;
padding: 9px 20px;
border: 1px solid #696767;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12.8px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.896px;
text-transform: uppercase;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.brochure-link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.brochure-link:hover {
background-color: #fafbfd;
border-color: #000000;
}
}
.brochure-link__type {
width: 27px;
height: 27px;
flex-shrink: 0;
}
.brochure-link__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* -----------------------------------------------------------------------------
Available modifications — shared js-accordion again.
-------------------------------------------------------------------------- */
.modifications {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.modifications__title {
margin: 0;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
}
.modifications__list {
display: flex;
flex-direction: column;
gap: 13px;
}
.modifications__item {
padding: 10px 20px;
border: 1px solid #dddddd;
transition: border-color 0.25s ease;
}
.modifications__item.is-open {
border-color: #0c2889;
}
.modifications__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding-block: 10px;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
line-height: normal;
text-align: left;
cursor: pointer;
}
.modifications__toggle:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
.modifications__toggle:hover {
color: #0c2889;
}
}
@media (max-width: 767.98px) {
.modifications__toggle {
font-size: 17px;
}
}
.modifications__icon {
width: 10px;
height: 5px;
flex-shrink: 0;
color: #0c2889;
transition: transform 0.25s ease;
}
.modifications__toggle[aria-expanded=true] .modifications__icon {
transform: rotate(180deg);
}
.modifications__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
/* the clipped element carries no padding — see README, collapsing panels */
}
.modifications__panel > * {
min-height: 0;
padding: 0;
overflow: hidden;
}
.modifications__item.is-open .modifications__panel {
grid-template-rows: 1fr;
}
.modifications__body {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
padding: 6px 0 10px;
color: #4f4f4f;
}
/* -----------------------------------------------------------------------------
Related products.
-------------------------------------------------------------------------- */
.related {
display: flex;
flex-direction: column;
gap: 33px;
}
.related__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.related__nav-group {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.related__slider {
width: 100%;
/* without this the slider sizes to its content inside a flex column and
grows past the container */
min-width: 0;
}
.related {
/* height:auto lets the cards stretch to the tallest in view instead of
Swiper's default 100% of a wrapper that has no height of its own */
}
.related__slide {
height: auto;
}
/* === Product single — end =================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Request Info List — Figma 990:6522 (empty), 1002:6954 (populated),
1002:7095 (submitted).
A 580px list column beside a 953px form. The empty state is not a separate
page: both states live here and request-list.js shows whichever applies.
============================================================================= */
.request {
padding-block: 80px;
}
@media (max-width: 1279.98px) {
.request {
padding-block: 48px;
}
}
@media (max-width: 767.98px) {
.request {
padding-block: 36px;
}
}
.request__layout {
display: grid;
grid-template-columns: 580px minmax(0, 1fr);
gap: 80px;
align-items: start;
}
@media (max-width: 1439.98px) {
.request__layout {
grid-template-columns: 480px minmax(0, 1fr);
gap: 48px;
}
}
@media (max-width: 1279.98px) {
.request__layout {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
}
.request__col {
display: flex;
flex-direction: column;
gap: 48px;
}
@media (max-width: 767.98px) {
.request__col {
gap: 32px;
}
}
.request__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.request__title {
margin: 0;
color: #000000;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.request__title {
font-size: 22px;
}
}
.request__subtitle {
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.request__form-col {
display: flex;
flex-direction: column;
gap: 32px;
/* Stays in view while a long list scrolls past. request-sticky.js sets
--sticky-top: under the compact header when the form fits the viewport,
negative (bottom edge pinned) when it is taller. Off where the columns stack. */
}
@media (min-width: 1280px) {
.request__form-col {
position: sticky;
top: var(--sticky-top, 120px);
}
}
.request {
/* Shown/hidden by request-list.js depending on whether anything is stored. */
}
.request__empty[hidden], .request__items[hidden] {
display: none;
}
/* -----------------------------------------------------------------------------
The list itself.
-------------------------------------------------------------------------- */
.request-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.request-item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
padding: 16px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.request-item__media {
width: 64px;
height: 48px;
overflow: hidden;
}
.request-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.request-item__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.request-item__category {
color: #979696;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.request-item {
/* Barlow, not the Oxanium-uppercase heading default. */
}
.request-item__title {
margin: 0;
color: #173453;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
}
.request-item__model {
color: #696767;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 13px;
line-height: 1.4;
}
.request-item__qty {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
color: #696767;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 13px;
}
.request-item__qty-input {
width: 44px;
padding: 2px 4px;
border: 1px solid #dddddd;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 13px;
text-align: center;
}
.request-item__qty-input:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 1px;
}
.request-item__remove {
align-self: end;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.4px;
cursor: pointer;
}
.request-item__remove:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.request-item__remove:hover {
color: #cc4b4c;
text-decoration: underline;
}
}
/* -----------------------------------------------------------------------------
Empty state.
-------------------------------------------------------------------------- */
.request-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding: 32px;
background-color: #fafbfd;
border: 1px solid #dddddd;
text-align: center;
}
.request-empty__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background-color: #0c2889;
color: #ffffff;
}
.request-empty__icon .icon {
width: 30px;
height: 30px;
}
.request-empty__text {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 521px;
}
.request-empty__title {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
}
.request-empty__body {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: #696767;
}
/* -----------------------------------------------------------------------------
"Looking for a product?" banner — navy panel with a photo bleeding off the
right. Figma 1010:8403 (580x290).
-------------------------------------------------------------------------- */
.quote-banner {
position: relative;
display: flex;
min-height: 290px;
background-color: #0c2889;
overflow: hidden;
/* blue band — a blue ring would be invisible on it */
}
.quote-banner :is(a, button):focus-visible {
outline: 2px solid #ffe810;
outline-offset: 2px;
}
.quote-banner__photo {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
object-fit: cover;
}
@media (max-width: 575.98px) {
.quote-banner__photo {
display: none;
}
}
.quote-banner__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
width: 279px;
padding: 40px 20px 40px 32px;
background-color: #0c2889;
}
@media (max-width: 575.98px) {
.quote-banner__content {
width: 100%;
}
}
.quote-banner__text {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 247px;
}
.quote-banner__eyebrow {
display: flex;
flex-direction: column;
gap: 6px;
color: #ffe810;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.quote-banner__eyebrow::after {
content: "";
width: 29px;
height: 3px;
background-color: #ffe810;
}
.quote-banner__title {
margin: 0;
color: #ffffff;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.quote-banner__body {
color: #e4e9f4;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.quote-banner__cta {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
align-self: flex-start;
padding: 0 20px;
background-color: #ffe810;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
transition: background-color 0.25s ease;
}
.quote-banner__cta:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.quote-banner__cta:hover {
background-color: #fed326;
}
}
.quote-banner__cta .icon {
width: 10px;
height: 10px;
}
/* -----------------------------------------------------------------------------
Dropzone — the drag-and-drop variant of the file field.
-------------------------------------------------------------------------- */
.dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 132px;
padding: 24px;
background-color: #fafbfd;
border: 1.5px dashed #c1c1c1;
color: #696767;
text-align: center;
cursor: pointer;
transition: border-color 0.25s ease, background-color 0.25s ease;
/* A dashed grey border turning blue is not a focus indicator on its own. */
}
.dropzone:has(:focus-visible) {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
.dropzone:focus-within {
border-color: #0c2889;
}
@media (hover: hover) and (pointer: fine) {
.dropzone:hover {
border-color: #0c2889;
}
}
.dropzone.is-dragover {
border-color: #0c2889;
background-color: #e4e9f4;
}
.dropzone__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.dropzone__icon {
width: 32px;
height: 32px;
color: #696767;
}
.dropzone {
/* label and hint are one group 4px apart, so the 12px gap belongs between
the icon and the pair rather than between every line */
}
.dropzone__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.dropzone__label {
color: #173453;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
}
.dropzone__hint {
color: #696767;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.2;
}
.dropzone__files {
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 13px;
}
.dropzone__files:empty {
display: none;
}
/* -----------------------------------------------------------------------------
Submitted confirmation — Figma 1002:7095.
-------------------------------------------------------------------------- */
.request-done {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
width: 100%;
max-width: 900px;
margin-inline: auto;
padding-block: 80px;
text-align: center;
}
@media (max-width: 767.98px) {
.request-done {
padding-block: 48px;
gap: 24px;
}
}
.request-done__icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background-color: #0c2889;
border-radius: 50%;
color: #ffe810;
}
.request-done__icon .icon {
width: 36px;
height: 32px;
}
.request-done__message {
display: flex;
flex-direction: column;
gap: 16px;
}
.request-done__title {
margin: 0;
color: #000000;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.request-done__title {
font-size: 24px;
line-height: 1.2;
}
}
.request-done__text {
color: #696767;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
line-height: 26px;
}
.request-done__summary {
width: 100%;
padding: 32px;
background-color: #f5f7f9;
border: 1px solid #dddddd;
text-align: left;
}
.request-done__summary-title {
margin: 0 0 20px;
color: #173453;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.request-done__products {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 20px;
border-bottom: 1px solid #dddddd;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.request-done__ref {
display: block;
margin-top: 20px;
color: #979696;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.request-done__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.request-done__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.request-done__note {
color: #979696;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1;
}
/* -----------------------------------------------------------------------------
Header badge — the count next to "Request Info".
-------------------------------------------------------------------------- */
.request-count {
display: none;
min-width: 20px;
height: 20px;
padding: 0 6px;
background-color: #0c2889;
border-radius: 10px;
color: #ffffff;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.request-count.is-visible {
display: inline-block;
}
/* === Request Info List — end ================================================ */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Services / Solutions / Projects — Figma 944:3790.
A 280px sidebar beside a column of content blocks. One stylesheet for all
three pages; only the data differs.
============================================================================= */
.service {
padding-block: 58px 60px;
}
@media (max-width: 1279.98px) {
.service {
padding-block: 32px 48px;
}
}
.service__layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 40px;
}
@media (max-width: 1279.98px) {
.service__layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
.service__main {
display: flex;
flex-direction: column;
gap: 20px;
}
.service__blocks {
margin-top: 18px;
}
.service__related {
margin-top: 60px;
}
.service {
/* the banner sits below with the same rhythm as between the blocks */
}
.service .cta-banner {
margin-top: 40px;
}
/* === Services — end ========================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Blog — Figma 953:4093 (listing) and 953:4807 (single).
The listing is a four-across grid of news cards under a centred headline.
The article reuses the content blocks, so an editor arranges its body the
same way as a Services page.
============================================================================= */
.blog {
padding-block: 17px 60px;
}
@media (max-width: 767.98px) {
.blog {
padding-bottom: 40px;
}
}
.blog__head {
display: flex;
justify-content: center;
margin-top: 46px;
text-align: center;
}
.blog__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px 20px;
margin-top: 51px;
}
@media (max-width: 1439.98px) {
.blog__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023.98px) {
.blog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 32px;
}
}
@media (max-width: 575.98px) {
.blog__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* -----------------------------------------------------------------------------
Article.
-------------------------------------------------------------------------- */
.article {
padding-block: 17px 60px;
}
@media (max-width: 767.98px) {
.article {
padding-bottom: 40px;
}
}
.article__head {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 46px;
max-width: 1112px;
}
.article__date {
display: flex;
align-items: center;
gap: 12px;
color: #979696;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: normal;
letter-spacing: 0.28px;
}
.article__date-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #c1c1c1;
}
.article__title {
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 36px;
margin: 0;
color: #000000;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.article__title {
font-size: 24px;
line-height: 1.2;
}
}
.article__body {
margin-top: 46px;
}
.article__related {
margin-top: 60px;
}
/* === Blog — end ============================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Resources — Figma 953:5189 (General Conveyor Information) and 957:5739
(Product Data Sheets). No page hero: the breadcrumb and title sit straight
under the header, beside a 280px sidebar with a CTA card below it.
The sidebar and the CTA are separate grid items so that on small screens the
sidebar can slide away into the drawer while the CTA stays in the page.
============================================================================= */
.resources {
padding-block: 45px 60px;
}
@media (max-width: 1279.98px) {
.resources {
padding-block: 32px 48px;
}
}
.resources__layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
/* The second row takes the slack, so the CTA stays 60px under the sidebar
however tall the main column grows. */
grid-template-rows: auto minmax(0, 1fr);
align-items: start;
column-gap: 60px;
row-gap: 60px;
}
@media (max-width: 1439.98px) {
.resources__layout {
column-gap: 40px;
}
}
@media (max-width: 1279.98px) {
.resources__layout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
row-gap: 40px;
}
}
.resources {
/* Explicit placement so the main column runs the full height of the two
stacked sidebar items. Fixed positioning takes the drawer out of the grid
below lg, so the single-column stack falls back to source order. */
}
.resources__aside {
grid-area: 1/1;
}
.resources__cta {
grid-area: 2/1;
}
.resources__main {
grid-area: 1/2/span 2;
}
@media (max-width: 1279.98px) {
.resources__aside, .resources__cta, .resources__main {
grid-area: auto;
}
}
.resources__main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.resources__intro {
margin: 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.resources__body {
width: 100%;
}
.resources {
/* The column's 20px gap already matches Figma everywhere except the data
sheets page, where the intro, the buttons and the catalogue sit 42px
apart — hence the 22px each of those two adds back. */
}
.resources__actions {
display: flex;
flex-wrap: wrap;
gap: 19px;
margin-top: 22px;
}
.resources .datasheet-list {
margin-top: 22px;
}
/* === Resources — end ======================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Partners — Figma 980:8012.
A centred title and intro on white, then a light band holding a four-across
grid of partner cards. The band bleeds the full window width while the grid
inside it keeps the 1630px measure Figma uses — narrower than the container.
============================================================================= */
.partner-list__crumbs {
padding-top: 19px;
}
.partner-list__head {
margin-top: 25px;
padding-bottom: 53px;
text-align: center;
}
@media (max-width: 1023.98px) {
.partner-list__head {
margin-top: 16px;
padding-bottom: 36px;
}
}
.partner-list__title {
max-width: 900px;
margin: 0 auto;
color: #021b3c;
font-size: 36px;
line-height: 44px;
}
@media (max-width: 1023.98px) {
.partner-list__title {
font-size: 30px;
line-height: 1.2;
}
}
@media (max-width: 767.98px) {
.partner-list__title {
font-size: 24px;
}
}
.partner-list__intro {
max-width: 1392px;
margin: 17px auto 0;
color: #000000;
}
.partner-list__band {
padding-block: 48px 116px;
background-color: #fafbfd;
}
@media (max-width: 1023.98px) {
.partner-list__band {
padding-block: 40px 56px;
}
}
.partner-list {
/* 4 x 384 + 3 x 31 = 1629.5 in Figma. */
}
.partner-list__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px 31px;
max-width: 1630px;
margin-inline: auto;
}
@media (max-width: 1439.98px) {
.partner-list__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
}
@media (max-width: 1023.98px) {
.partner-list__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
}
@media (max-width: 575.98px) {
.partner-list__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* === Partners — end ========================================================= */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Contact — Figma 1037:15683.
Three bands: the centred page title over the two office cards, the map
section, and the blue enquiry form that runs into the footer.
============================================================================= */
.contact {
padding-bottom: 57px;
}
@media (max-width: 1023.98px) {
.contact {
padding-bottom: 36px;
}
}
.contact__crumbs {
padding-top: 19px;
}
.contact__head {
margin-top: 14px;
text-align: center;
}
.contact {
/* As designed: Figma sets this in Yellow on white. It is the same eyebrow
treatment the inner-page heroes use, where it sits on a dark photo. */
}
.contact__eyebrow {
margin: 0;
color: #fed326;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.contact__eyebrow {
font-size: 18px;
}
}
.contact__title {
margin: 0;
color: #000000;
font-size: 40px;
line-height: 65px;
}
@media (max-width: 1279.98px) {
.contact__title {
font-size: 32px;
line-height: 1.3;
}
}
@media (max-width: 767.98px) {
.contact__title {
font-size: 24px;
}
}
.contact {
/* Figma's split is 781 / 837 of the 1650 row. */
}
.contact__locations {
display: grid;
grid-template-columns: minmax(0, 781fr) minmax(0, 837fr);
gap: 32px;
margin-top: 30px;
}
@media (max-width: 1279.98px) {
.contact__locations {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
}
/* =============================================================================
Enquiry form — the blue band under the map. Its labels sit on the fill, so
the shared .field styles are re-coloured for dark ground here rather than in
the component, which every other page uses on white.
============================================================================= */
.contact-form {
padding-block: 85px;
background-color: #0c2889;
}
@media (max-width: 1279.98px) {
.contact-form {
padding-block: 56px;
}
}
@media (max-width: 767.98px) {
.contact-form {
padding-block: 40px;
}
}
.contact-form__layout {
display: grid;
grid-template-columns: minmax(0, 485fr) minmax(0, 1086fr);
gap: 92px;
align-items: start;
}
@media (max-width: 1439.98px) {
.contact-form__layout {
gap: 56px;
}
}
@media (max-width: 1279.98px) {
.contact-form__layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
.contact-form__intro {
display: flex;
flex-direction: column;
gap: 24px;
color: #ffffff;
}
.contact-form__title {
margin: 0;
color: inherit;
font-size: 32px;
line-height: 36px;
}
@media (max-width: 767.98px) {
.contact-form__title {
font-size: 24px;
line-height: 1.2;
}
}
.contact-form__text {
margin: 0;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.contact-form__form {
display: flex;
flex-direction: column;
gap: 19px;
}
.contact-form__row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1023.98px) {
.contact-form__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.contact-form__row {
grid-template-columns: minmax(0, 1fr);
}
}
.contact-form__row {
/* message beside the upload control */
}
.contact-form__row--split {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
align-items: start;
}
@media (max-width: 575.98px) {
.contact-form__row--split {
grid-template-columns: minmax(0, 1fr);
}
}
.contact-form__submit {
align-self: flex-start;
}
.contact-form {
/* -- controls on the blue ------------------------------------------------- */
}
.contact-form .field__label {
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-transform: none;
}
.contact-form .field--required .field__label::after {
color: #e53e3e;
}
.contact-form .field__control {
border-color: #e4e9f4;
color: #000000;
font-size: 14px;
}
.contact-form .field__control::placeholder {
color: #696767;
}
.contact-form .field__control:focus {
border-color: #ffe810;
}
.contact-form .field__control {
/* the blue swallows a blue ring */
}
.contact-form .field__control:focus-visible {
outline-color: #ffe810;
}
.contact-form {
/* ...and so does everything else standing on it */
}
.contact-form .btn:focus-visible,
.contact-form .file-field:has(:focus-visible) {
outline-color: #ffe810;
}
.contact-form .field__control:not(textarea) {
height: 44px;
padding-block: 0;
}
.contact-form textarea.field__control {
min-height: 100px;
padding: 12px;
}
.contact-form {
/* Validation messages and the wrong-field border have to read on the blue. */
}
.contact-form .field__error {
color: #fed326;
}
.contact-form .field__control.is-invalid {
border-color: #e53e3e;
}
/* === Contact — end ========================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Search results — not in Figma. Built from the design's own type, colours and
spacing so it reads as part of the site: a search box, a run of result rows,
and pagination. The empty state lives in the same template, chosen by whether
there are any results.
============================================================================= */
.search {
padding-block: 19px 60px;
}
@media (max-width: 1023.98px) {
.search {
padding-bottom: 48px;
}
}
.search__head {
margin-top: 25px;
}
.search__form {
display: flex;
gap: 12px;
margin-top: 32px;
}
@media (max-width: 575.98px) {
.search__form {
flex-direction: column;
}
}
.search__input {
flex: 1;
min-width: 0;
padding: 12px 16px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
appearance: none;
}
.search__input::placeholder {
color: #696767;
opacity: 1;
}
.search__input:hover {
border-color: #979696;
}
.search__input:focus {
border-color: #0c2889;
outline: none;
}
.search__submit {
flex-shrink: 0;
}
.search__summary {
margin-top: 24px;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.search__summary strong {
color: #0c2889;
}
.search__list {
display: flex;
flex-direction: column;
margin-top: 8px;
}
.search__pagination {
margin-top: 40px;
}
.search {
/* -- empty state ---------------------------------------------------------- */
}
.search__empty {
max-width: 640px;
margin-top: 40px;
padding: 40px;
background-color: #fafbfd;
border: 1px solid #e4e9f4;
}
@media (max-width: 767.98px) {
.search__empty {
padding: 24px;
}
}
.search__empty-title {
margin: 0;
color: #173453;
font-size: 24px;
line-height: 1.2;
}
.search__empty-text {
margin: 12px 0 0;
color: #4f4f4f;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
}
.search__empty-label {
margin: 28px 0 0;
color: #000000;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.search__suggestions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.search__suggestion {
display: inline-flex;
padding: 8px 14px;
background-color: #ffffff;
border: 1px solid #0c2889;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: normal;
transition: background-color 0.25s ease, color 0.25s ease;
}
.search__suggestion:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.search__suggestion:hover {
background-color: #0c2889;
color: #ffffff;
}
}
/* =============================================================================
One result row. The whole row is the link, so the title, the trail above it
and the excerpt are all part of the same target.
============================================================================= */
.search-result {
border-bottom: 1px solid #dddddd;
}
.search-result__link {
display: flex;
flex-direction: column;
gap: 6px;
padding: 24px 0;
color: #4f4f4f;
}
.search-result__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
.search-result__link:hover .search-result__title {
color: #006bb6;
}
}
@media (max-width: 767.98px) {
.search-result__link {
padding: 20px 0;
}
}
.search-result__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.search-result__type {
padding: 3px 8px;
background-color: #e4e9f4;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.4;
text-transform: uppercase;
}
.search-result__crumb {
color: #6a7c93;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.3;
}
.search-result__title {
color: #0c2889;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
transition: color 0.25s ease;
}
@media (max-width: 767.98px) {
.search-result__title {
font-size: 20px;
}
}
.search-result__excerpt {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.4;
}
/* === Search — end =========================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
404 — not in Figma. A centred column: the code, a heading, the site search
and a way back into each main section.
============================================================================= */
.error-page {
padding-block: 80px 90px;
}
@media (max-width: 1023.98px) {
.error-page {
padding-block: 48px 56px;
}
}
.error-page__inner {
display: flex;
flex-direction: column;
align-items: center;
max-width: 760px;
text-align: center;
}
.error-page {
/* Oversized, but in the lavender the rest of the site uses for quiet fills,
so it reads as a graphic rather than as shouting. */
}
.error-page__code {
margin: 0;
color: #e4e9f4;
font-family: "Oxanium", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 160px;
font-weight: 600;
line-height: 1;
}
@media (max-width: 767.98px) {
.error-page__code {
font-size: 96px;
}
}
.error-page__title {
margin: 8px 0 0;
color: #000000;
font-size: 40px;
line-height: 1.2;
}
@media (max-width: 1023.98px) {
.error-page__title {
font-size: 32px;
}
}
@media (max-width: 767.98px) {
.error-page__title {
font-size: 24px;
}
}
.error-page__text {
max-width: 520px;
margin: 16px 0 0;
color: #4f4f4f;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.4;
}
.error-page__form {
display: flex;
gap: 12px;
width: 100%;
max-width: 560px;
margin-top: 32px;
}
@media (max-width: 575.98px) {
.error-page__form {
flex-direction: column;
}
}
.error-page__input {
flex: 1;
min-width: 0;
padding: 12px 16px;
background-color: #ffffff;
border: 1px solid #c1c1c1;
color: #333333;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.3;
appearance: none;
}
.error-page__input::placeholder {
color: #696767;
opacity: 1;
}
.error-page__input:hover {
border-color: #979696;
}
.error-page__input:focus {
border-color: #0c2889;
outline: none;
}
.error-page__submit {
flex-shrink: 0;
}
.error-page__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 36px;
}
.error-page__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background-color: #fafbfd;
border: 1px solid #e4e9f4;
color: #0c2889;
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.error-page__link:focus-visible {
outline: 2px solid #0c2889;
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.error-page__link:hover {
background-color: #0c2889;
border-color: #0c2889;
color: #ffffff;
}
.error-page__link:hover .error-page__link-icon {
transform: translateX(4px);
}
}
.error-page__link-icon {
width: 10px;
height: 10px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
/* === 404 — end ============================================================== */
/* =============================================================================
Reset — modern, minimal. Anything opinionated about how text looks belongs in
base/_typography.scss, not here.
============================================================================= */
/* =============================================================================
Styleguide / UI kit page.
Reference material only — none of this ships on a real page, so it is kept
in one file and can be deleted wholesale at the end of the project.
============================================================================= */
.sg {
padding-block: 60px 100px;
background-color: #fafbfd;
}
.sg__head {
max-width: 760px;
margin-bottom: 64px;
}
.sg__kicker {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-bottom: 8px;
color: #fed326;
letter-spacing: 2px;
text-transform: uppercase;
}
.sg__lead {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
margin-top: 16px;
color: #696767;
line-height: 1.5;
}
.sg__block {
padding: 40px;
margin-bottom: 32px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
@media (max-width: 767.98px) {
.sg__block {
padding: 24px 20px;
}
}
.sg__title {
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 2px solid #ffe810;
}
.sg__sub {
margin: 32px 0 16px;
color: #696767;
font-size: 16px;
}
.sg__sub:first-of-type {
margin-top: 0;
}
.sg__sub code {
margin-left: 8px;
}
.sg__note {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
max-width: 760px;
margin-bottom: 24px;
color: #696767;
}
.sg__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}
.sg__row--dark {
padding: 20px;
margin-top: 16px;
background-color: #021b3c;
}
.sg__form {
max-width: 900px;
}
.sg__rte {
max-width: 760px;
}
.sg code {
padding: 2px 6px;
background-color: #e4e9f4;
color: #0c2889;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 12px;
}
.sg {
/* -- colours -------------------------------------------------------------- */
}
.sg__swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 20px;
}
.sg {
/* -- typography ----------------------------------------------------------- */
}
.sg__type {
display: flex;
flex-direction: column;
gap: 20px;
}
.sg {
/* -- icons ---------------------------------------------------------------- */
}
.sg__icons {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.sg-swatch {
display: flex;
flex-direction: column;
gap: 4px;
}
.sg-swatch__chip {
height: 64px;
margin-bottom: 8px;
border: 1px solid #dddddd;
}
.sg-swatch b {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1;
color: #333333;
}
.sg-swatch code {
align-self: flex-start;
}
.sg-type {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e0e0e0;
}
.sg-type > code {
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.sg-type {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.sg-icon {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #0c2889;
}
/* text-style demos — the only place these one-off classes exist */
.sg-t-l {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1;
}
.sg-t-l-em {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
.sg-t-body {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
}
.sg-t-s {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1;
letter-spacing: 2px;
}
.sg-t-xs {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.sg-t-upper {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-transform: uppercase;
}
.sg-t-upper-em {
font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
}
/* === Styleguide — end ======================================================= */
/* === main.scss — end ======================================================== */