/**
* Novosound Theme — main stylesheet
*
* Layered on top of Bootstrap 5.3. Uses CSS custom properties for the
* brand palette and typography scale.
*/
/* -----------------------------------------------------------
* Brand variables
* --------------------------------------------------------- */
:root {
/* Brand purples — dark purple replaces "navy", purple replaces "red"
as the accent. Legacy names kept so existing selectors don't need
a rewrite; --nvs-navy IS the dark purple, --nvs-red IS the purple. */
--nvs-navy: #31194A; /* Dark Purple */
--nvs-blue: #4A2670; /* deeper mid-purple for gradients */
--nvs-red: #7026A5; /* Purple (accent) */
--nvs-red-dark: #4E1875; /* darker for :hover */
--nvs-purple-light: rgba(112, 38, 165, 0.15); /* 15% Purple */
--nvs-yellow: #F5AF3D;
--nvs-teal: #659CBB;
--nvs-green: #91C73E;
--nvs-white: #FFFFFF;
--nvs-black: #111111;
--nvs-grey-100: #F5F6F8;
--nvs-grey-200: #ECEEF2;
--nvs-grey-300: #D7DAE0;
--nvs-grey-600: #6c757d;
--nvs-font-heading: "Host Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
--nvs-font-body: "Aktiv Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
--nvs-h1: 45px;
--nvs-h2: 30px;
--nvs-h3: 26px;
--nvs-p: 16px;
--nvs-header-height: 80px;
--bs-primary: var(--nvs-navy);
--bs-secondary: var(--nvs-red);
--bs-body-font-family: var(--nvs-font-body);
--bs-body-font-size: var(--nvs-p);
--bs-body-color: var(--nvs-navy);
--bs-link-color: var(--nvs-red);
--bs-link-hover-color: var(--nvs-red-dark);
}
/* -----------------------------------------------------------
* Fonts
* --------------------------------------------------------- */
@font-face {
font-family: "Aptos Slab";
src: url("../fonts/AptosSlab-SemiBold.woff2") format("woff2"),
url("../fonts/AptosSlab-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Aktiv Grotesk";
src: url("../fonts/AktivGrotesk-Medium.woff2") format("woff2"),
url("../fonts/AktivGrotesk-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: block;
}
/* -----------------------------------------------------------
* Base typography
* --------------------------------------------------------- */
html, body { overflow-x: clip; }
body {
font-family: var(--nvs-font-body);
font-weight: 400;
font-size: var(--nvs-p);
color: var(--nvs-navy);
line-height: 1.55;
}
p, li {
font-family: var(--nvs-font-body);
font-weight: 400;
font-size: var(--nvs-p);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--nvs-font-heading);
font-weight: 500;
color: var(--nvs-navy);
line-height: 1.15;
letter-spacing: -0.005em;
}
h1, .h1 { font-size: var(--nvs-h1); }
h2, .h2 { font-size: var(--nvs-h2); }
h3, .h3 { font-size: var(--nvs-h3); }
h4, .h4 { font-size: 22px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }
a { color: var(--nvs-red); text-decoration: none; }
a:hover { color: var(--nvs-red-dark); text-decoration: none; }
@media (max-width: 767.98px) {
:root {
--nvs-h1: 30px;
--nvs-h2: 28px;
--nvs-h3: 24px;
--nvs-p: 15px;
}
body, p, li { font-size: 15px; }
}
/* -----------------------------------------------------------
* Container — cap at 1350px per design spec
* --------------------------------------------------------- */
.container,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1350px;
}
/* -----------------------------------------------------------
* Branded buttons — pill-shaped, heading font, brand purples.
* --------------------------------------------------------- */
.btn {
font-family: var(--nvs-font-heading);
font-weight: 600;
font-size: 15px;
border-radius: 999px;
padding: 1.1rem 2.1rem;
display: inline-flex;
align-items: center;
gap: .85rem;
line-height: 1;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-navy {
background: var(--nvs-navy);
color: var(--nvs-white);
border: 1px solid var(--nvs-navy);
}
.btn-navy:hover { background: var(--nvs-red); color: var(--nvs-white); border-color: var(--nvs-red); }
.btn-red {
background: var(--nvs-red);
color: var(--nvs-white);
border: 1px solid var(--nvs-red);
}
.btn-red:hover { background: var(--nvs-red-dark); color: var(--nvs-white); border-color: var(--nvs-red-dark); }
.btn-red:focus { color: var(--nvs-white); box-shadow: 0 0 0 .2rem rgba(112,38,165,.3); }
.btn-yellow {
background: var(--nvs-yellow);
color: var(--nvs-navy);
border: 1px solid var(--nvs-yellow);
}
.btn-yellow:hover { filter: brightness(0.95); }
.btn-teal {
background: var(--nvs-teal);
color: var(--nvs-white);
border: 1px solid var(--nvs-teal);
}
.btn-outline-navy {
background: transparent;
color: var(--nvs-navy);
border: 1px solid var(--nvs-navy);
}
.btn-outline-navy:hover { background: transparent; color: var(--nvs-red); border-color: var(--nvs-red); }
.btn-outline-white {
background: transparent;
color: var(--nvs-white);
border: 1px solid var(--nvs-white);
}
.btn-outline-white:hover { background: var(--nvs-white); color: var(--nvs-navy); }
/* Circular arrow icon (chained inside a CTA button or after a link) */
.btn-circle-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--nvs-white);
color: var(--nvs-red);
flex-shrink: 0;
font-size: 16px;
transition: transform .2s ease;
}
.btn-circle-arrow--red { background: var(--nvs-red); color: var(--nvs-white); }
.btn-circle-arrow--navy { background: var(--nvs-navy); color: var(--nvs-white); }
.btn-circle-arrow--white { background: var(--nvs-white); color: var(--nvs-red); }
a:hover .btn-circle-arrow,
.btn:hover .btn-circle-arrow { transform: translateX(3px); }
/* Standalone circular arrow link (no text), navy/red bg */
.arrow-link {
display: inline-flex;
align-items: center;
gap: 1rem;
font-family: var(--nvs-font-heading);
font-weight: 600;
font-size: 16px;
color: var(--nvs-navy);
text-decoration: none;
}
.arrow-link:hover { color: var(--nvs-red); text-decoration: none; }
.arrow-link__icon {
display: inline-flex;
width: 44px;
height: 44px;
background: var(--nvs-navy);
color: var(--nvs-white);
align-items: center;
justify-content: center;
}
.arrow-link:hover .arrow-link__icon { background: var(--nvs-red); }
/* -----------------------------------------------------------
* Backgrounds & text utility colours
* --------------------------------------------------------- */
.bg-navy { background-color: var(--nvs-navy) !important; }
.bg-blue { background-color: var(--nvs-blue) !important; }
.bg-red { background-color: var(--nvs-red) !important; }
.bg-yellow { background-color: var(--nvs-yellow) !important; }
.bg-teal { background-color: var(--nvs-teal) !important; }
.bg-light { background-color: var(--nvs-grey-100) !important; }
.text-navy { color: var(--nvs-navy) !important; }
.text-red { color: var(--nvs-red) !important; }
.text-yellow { color: var(--nvs-yellow) !important; }
.text-teal { color: var(--nvs-teal) !important; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy p,
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue p,
.bg-red h1, .bg-red h2, .bg-red h3, .bg-red h4, .bg-red p {
color: var(--nvs-white);
}
/* Coloured accent underline (used under stats, services, page hero) */
.accent {
display: block;
width: 60px;
height: 4px;
margin-top: .75rem;
background: var(--nvs-red);
}
/* Stats: accent is thicker, full column width, pinned to the block's foot. */
.stat-block .accent {
width: 100%;
height: 6px;
margin-top: 1.75rem;
}
.accent--red { background: var(--nvs-red); }
.accent--yellow { background: var(--nvs-yellow); }
.accent--teal { background: var(--nvs-teal); }
.accent--navy { background: var(--nvs-navy); }
.accent--white { background: var(--nvs-white); }
/* -----------------------------------------------------------
* Site header — transparent and absolutely positioned over the
* hero on every page. Logo and nav are always white because the
* hero behind always carries a navy gradient overlay.
* --------------------------------------------------------- */
.site-header {
background: transparent;
color: var(--nvs-white);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1090; /* above any modal (Bootstrap modal: 1055) */
padding-top: 6px;
padding-bottom: 6px;
}
/* Same header stays floating while a modal is open */
body.mega-open .site-header,
body.search-open .site-header { position: fixed; }
.site-header__row { min-height: var(--nvs-header-height); }
/* Pages without a hero (single posts, archives, search, 404) fall back
to a solid navy header bar so the white nav stays readable. */
body.has-no-hero .site-header {
background: var(--nvs-navy);
position: sticky;
top: 0;
}
/* Novosound home page — hero is a contained rounded box on a white
background, so the header sits on white with navy text. Also nudge it
down so it sits inside the rounded banner box, not stuck to the top. */
body.is-novosound-home .site-header {
background: transparent;
color: var(--nvs-navy);
top: 1rem;
padding-top: 1rem;
}
body.is-novosound-home .site-header__nav .main-menu a,
body.is-novosound-home .site-header__nav .main-menu .nav-link,
body.is-novosound-home .site-header__actions .btn-link {
color: var(--nvs-navy);
}
body.is-novosound-home .site-header__nav .main-menu .nav-link:hover,
body.is-novosound-home .site-header__nav .main-menu .active > .nav-link,
body.is-novosound-home .site-header__nav .main-menu .current-menu-item > a {
color: var(--nvs-navy);
border-bottom-color: var(--nvs-red);
}
.site-header__logo .custom-logo,
.site-header__logo-img {
max-height: 48px;
width: auto;
display: block;
}
@media (min-width: 992px) {
.site-header__logo .custom-logo,
.site-header__logo-img { max-height: 96px; }
}
.site-header__logo .site-title {
font-family: var(--nvs-font-heading);
font-size: 22px;
color: var(--nvs-white);
}
.site-header__logo a { color: var(--nvs-white); text-decoration: none; }
/* Primary nav (desktop, centred 8-col) — hides while the mega panel is open */
.site-header__nav {
transition: opacity .2s ease, visibility .2s ease;
}
body.mega-open .site-header__nav {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-header__nav .main-menu {
display: flex;
gap: 1.75rem;
margin: 0;
padding: 0;
list-style: none;
align-items: center;
}
.site-header__nav .main-menu .nav-link,
.site-header__nav .main-menu a {
font-family: var(--nvs-font-body);
font-weight: 500;
font-size: 15px;
color: var(--nvs-white);
padding: .5rem .25rem;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color .15s ease;
}
.site-header__nav .main-menu .nav-link:hover,
.site-header__nav .main-menu .active > .nav-link,
.site-header__nav .main-menu .current-menu-item > a {
color: var(--nvs-white);
border-bottom-color: var(--nvs-red);
}
/* Dropdowns (e.g. "Our Companies") inside main menu */
.site-header__nav .dropdown-menu {
background: var(--nvs-navy);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 0;
margin-top: 0;
padding: .5rem 0;
}
.site-header__nav .dropdown-menu .dropdown-item {
color: var(--nvs-white);
font-size: 14px;
padding: .5rem 1.5rem;
}
.site-header__nav .dropdown-menu .dropdown-item:hover,
.site-header__nav .dropdown-menu .dropdown-item:focus {
background: var(--nvs-blue);
color: var(--nvs-yellow);
}
/* Replace Bootstrap's triangle caret with a thin chevron icon */
.site-header__nav .dropdown-toggle::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-left: .5rem;
border: 0;
vertical-align: middle;
background: center / contain no-repeat
url("data:image/svg+xml;utf8,");
transition: transform .15s ease;
}
.site-header__nav .dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Right column actions */
.site-header__actions .btn-link {
color: var(--nvs-white);
font-size: 20px;
padding: .25rem .5rem;
text-decoration: none;
}
.site-header__actions .btn-link:hover { color: var(--nvs-yellow); }
.site-header__search { margin-right: .75rem; }
/* 2-line nav icon — transforms into an X when the mega panel is open */
.nav-icon-2line {
display: inline-block;
width: 28px;
height: 18px;
position: relative;
}
.nav-icon-2line span {
display: block;
position: absolute;
left: 0;
right: 0;
height: 3px;
background: currentColor;
border-radius: 2px;
transition: top .25s ease, bottom .25s ease, transform .25s ease;
transform-origin: center;
}
.nav-icon-2line span:nth-child(1) { top: 2px; }
.nav-icon-2line span:nth-child(2) { bottom: 2px; }
body.mega-open .nav-icon-2line span:nth-child(1) {
top: 50%;
margin-top: -1.5px;
transform: rotate(45deg);
}
body.mega-open .nav-icon-2line span:nth-child(2) {
bottom: 50%;
margin-bottom: -1.5px;
transform: rotate(-45deg);
}
/* Search panel */
.site-header__search-panel {
background: var(--nvs-blue);
color: var(--nvs-white);
}
.site-header__search-panel .search-field,
.site-header__search-panel input[type="search"] {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255,255,255,0.4);
color: var(--nvs-white);
width: 100%;
padding: .5rem 0;
}
.site-header__search-panel input::placeholder { color: rgba(255,255,255,0.6); }
/* -----------------------------------------------------------
* Mega panel — full-screen modal with fade
* --------------------------------------------------------- */
.mega-panel.modal { z-index: 1080; }
.mega-panel .modal-dialog { margin: 0; max-width: none; }
.mega-panel .modal-content,
.mega-panel__content {
background: var(--nvs-navy);
color: var(--nvs-white);
border: 0;
border-radius: 0;
height: 100vh;
}
.mega-panel.fade { transition: opacity .35s ease; }
.mega-panel.fade .modal-dialog { transform: none; }
.mega-panel__body {
padding: 0;
height: 100vh;
}
.mega-panel__row {
min-height: 100vh;
align-items: stretch;
}
.mega-panel__col {
position: relative;
display: flex;
align-items: flex-start;
/* Both panels top-align their content so the headings line up. The
large top padding pushes the content down toward the optical centre
without depending on equal-height content (which would be needed for
`align-items: center` to also align headings). */
padding-top: max(calc(var(--nvs-header-height) + 4rem), 18vh);
padding-bottom: 4rem;
}
.mega-panel__col-inner { width: 100%; }
/* Combined content of left + right panels mirrors the header container
(1350px). Outer padding aligns to the container edge, inner padding
leaves 2rem on either side of the centre divider. */
.mega-panel__col--left {
padding-left: max(1rem, calc((100vw - 1350px) / 2 + 0.75rem));
padding-right: 2rem;
}
.mega-panel__col--brands {
padding-left: 4rem;
padding-right: max(1rem, calc((100vw - 1350px) / 2 + 0.75rem));
}
.mega-panel__col--brands {
background:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(135deg, var(--nvs-blue), var(--nvs-navy));
background-size: 64px 64px, 64px 64px, 100% 100%;
}
.mega-panel__block + .mega-panel__block { margin-top: 2.5rem; }
/* LinkedIn + Contact Us row pinned to the bottom of the left panel,
aligned horizontally with the rest of the inner content. */
.mega-panel__col--left .mega-panel__block--actions {
position: absolute;
left: max(1rem, calc((100vw - 1350px) / 2 + 0.75rem));
right: 2rem;
bottom: 4rem;
margin: 0;
}
/* -------- Mobile / tablet (< lg) — stack cleanly, drop absolute positioning -------- */
@media (max-width: 991.98px) {
.mega-panel__row { min-height: 0; }
.mega-panel__body { height: auto; min-height: 100vh; }
.mega-panel__col {
align-items: flex-start;
padding-top: calc(var(--nvs-header-height) + 4rem);
padding-bottom: 2.5rem;
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
.mega-panel__col--brands {
/* slight visual separation between the two stacked sections */
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 2.5rem !important;
}
.mega-panel__menu {
column-count: 1;
column-gap: 0;
}
.mega-panel__menu a { font-size: 20px; }
.mega-panel__col--left .mega-panel__block--actions {
position: static;
margin-top: 2rem;
left: auto;
right: auto;
bottom: auto;
}
.mega-panel__heading { margin-bottom: 1rem; }
.mega-panel__block + .mega-panel__block { margin-top: 2rem; }
.mega-panel__brand a { padding: 1rem 0; }
}
@media (max-width: 991.98px) {
.mega-panel__col {
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 1.5rem 0;
}
.mega-panel__col:last-child { border-bottom: 0; }
.mega-panel__col--left { padding-top: 130px; }
}
.mega-panel__heading {
color: rgba(255,255,255,0.5);
font-family: var(--nvs-font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.mega-panel__menu {
list-style: none;
padding: 0;
margin: 0;
column-count: 1;
column-gap: 0;
}
.mega-panel__menu li {
margin-bottom: 1rem;
break-inside: avoid;
}
.mega-panel__menu a {
color: var(--nvs-white);
font-family: var(--nvs-font-body);
font-weight: 500;
font-size: 17px;
text-decoration: none;
}
.mega-panel__menu a:hover { color: var(--nvs-yellow); }
.mega-panel__address,
.mega-panel__phone a,
.mega-panel__email a {
color: var(--nvs-white);
font-size: 15px;
text-decoration: none;
font-style: normal;
line-height: 1.6;
}
.mega-panel__phone,
.mega-panel__email {
display: flex;
align-items: center;
gap: .75rem;
}
.mega-panel__icon {
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
color: var(--nvs-teal);
font-size: 14px;
}
.mega-panel__phone a:hover,
.mega-panel__email a:hover { color: var(--nvs-yellow); }
.mega-panel__social-link {
display: inline-flex;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--nvs-teal);
color: var(--nvs-white);
align-items: center;
justify-content: center;
font-size: 18px;
text-decoration: none;
transition: background-color .15s ease;
}
.mega-panel__social-link:hover { background: var(--nvs-teal); color: var(--nvs-white); }
.mega-panel__col--brands {
background: var(--nvs-blue);
background-image: linear-gradient(135deg, var(--nvs-blue), var(--nvs-navy));
}
/* ---------------------------------------------------------
* Search modal — full screen, centred field
* ------------------------------------------------------- */
.search-modal .modal-dialog { margin: 0; max-width: none; }
.search-modal .modal-content,
.search-modal__content {
background: var(--nvs-navy);
color: var(--nvs-white);
border: 0;
border-radius: 0;
height: 100vh;
}
.search-modal.fade { transition: opacity .25s ease; }
.search-modal.fade .modal-dialog { transform: none; }
.search-modal__body {
display: flex;
align-items: center;
justify-content: center;
padding: var(--nvs-header-height) 0 0 0;
}
.search-modal__body .container { max-width: 800px; }
.search-modal__form { width: 100%; }
.search-modal__label {
display: block;
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: .75rem;
}
.search-modal__field {
width: 100%;
background: transparent;
border: 0;
border-bottom: 2px solid rgba(255,255,255,0.4);
color: var(--nvs-white);
font-family: var(--nvs-font-heading);
font-size: clamp(28px, 4vw, 48px);
padding: .75rem 0;
outline: none;
}
.search-modal__field::placeholder { color: rgba(255,255,255,0.35); }
.search-modal__field:focus { border-bottom-color: var(--nvs-white); }
.mega-panel__brands { margin: 0; padding: 0; }
.mega-panel__brand { margin-bottom: 0.5rem; }
.mega-panel__brand:last-child { margin-bottom: 0; }
.mega-panel__brand a {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-decoration: none;
color: var(--nvs-white);
}
.mega-panel__brand:last-child a { border-bottom: 0; }
.mega-panel__brand-arrow {
display: inline-flex;
flex-shrink: 0;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.4);
color: var(--nvs-white);
font-size: 20px;
transition: background-color .15s ease, border-color .15s ease;
}
.mega-panel__brand a:hover .mega-panel__brand-arrow {
background: var(--nvs-white);
color: var(--nvs-navy);
border-color: var(--nvs-white);
}
.mega-panel__brand-text { display: block; flex: 1; }
.mega-panel__brand-title {
display: block;
font-family: var(--nvs-font-heading);
font-size: 18px;
color: var(--nvs-white);
margin-bottom: .2rem;
}
.mega-panel__brand-desc {
display: block;
font-size: 13px;
color: rgba(255,255,255,0.6);
line-height: 1.4;
}
.mega-panel__brand a:hover .mega-panel__brand-title { color: var(--nvs-yellow); }
/* -----------------------------------------------------------
* Page hero (inner pages — About etc.)
* Image and navy bleed up behind the transparent header (same
* treatment as the home hero). Left = copy, right = image, with
* a navy gradient on the image side fading toward the copy.
* --------------------------------------------------------- */
.page-hero {
position: relative;
overflow: hidden;
min-height: 480px;
display: flex;
align-items: flex-end;
color: var(--nvs-white);
background: var(--nvs-navy);
padding-top: var(--nvs-header-height);
}
/* Full-bleed background image — same treatment as the home hero. */
.page-hero__bg,
.page-hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero__bg img { display: block; }
/* Navy gradients: solid under the header, stronger floor at the bottom
for legibility — bleeds up behind the transparent header. */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, var(--nvs-navy) 0%, rgba(49,25,74,.6) 28%, rgba(49,25,74,0) 60%),
linear-gradient(0deg, rgba(49,25,74,.88) 0%, rgba(49,25,74,.5) 34%, rgba(49,25,74,0) 72%);
}
.page-hero__inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: calc(var(--nvs-header-height) + 3rem);
padding-bottom: 5rem;
}
.page-hero__title { color: var(--nvs-white); margin-bottom: 1rem; }
.page-hero__lead { color: rgba(255,255,255,0.9); max-width: 620px; margin-bottom: 0; }
.page-hero__breadcrumb {
font-size: 13px;
color: rgba(255,255,255,0.65);
margin-top: 1.5rem;
}
.page-hero__breadcrumb a { color: rgba(255,255,255,0.65); }
.page-hero__breadcrumb a:hover { color: var(--nvs-yellow); }
.page-hero__cta { display: inline-flex; margin-top: 1.5rem; }
@media (max-width: 991.98px) {
.page-hero { min-height: 0; }
.page-hero__inner {
padding-top: calc(var(--nvs-header-height) + 2rem);
padding-bottom: 2.5rem;
}
}
.page-hero__cta-wrap {
position: relative;
}
/* -----------------------------------------------------------
* Home hero — 2-column split: copy left, product render right.
* Background is a subtle white → light-purple wash (top to bottom).
* --------------------------------------------------------- */
.home-hero {
position: relative;
overflow: hidden;
color: var(--nvs-navy);
background:
radial-gradient(ellipse 65% 60% at 62% 72%, rgba(112, 38, 165, 0.28) 0%, rgba(112, 38, 165, 0) 70%),
radial-gradient(ellipse 40% 45% at 88% 90%, rgba(112, 38, 165, 0.20) 0%, rgba(112, 38, 165, 0) 65%),
radial-gradient(ellipse 35% 45% at 5% 100%, rgba(112, 38, 165, 0.18) 0%, rgba(112, 38, 165, 0) 65%),
radial-gradient(ellipse 55% 50% at 15% 20%, rgba(112, 38, 165, 0.06) 0%, rgba(112, 38, 165, 0) 60%),
radial-gradient(ellipse 70% 25% at 50% 0%, rgba(112, 38, 165, 0.09) 0%, rgba(112, 38, 165, 0) 100%),
#ffffff;
height: clamp(680px, calc(100vh - 2rem), 740px);
display: flex;
align-items: center;
border-radius: 24px;
margin: 1rem 1rem 2rem;
padding-top: 0;
}
@media (max-width: 575.98px) {
.home-hero { border-radius: 16px; margin: .5rem .5rem 1.5rem; }
}
.home-hero__inner {
position: relative;
z-index: 2;
padding-top: 2rem;
padding-bottom: 2rem;
width: 100%;
}
@media (max-width: 991.98px) {
.home-hero {
height: auto;
min-height: 0;
max-height: none;
align-items: stretch;
}
.home-hero__inner {
padding-top: calc(var(--nvs-header-height) + 2rem);
padding-bottom: 3rem;
}
.home-hero .btn,
.site-header__cta,
.home-partner .btn,
.site-footer--novosound .btn {
padding: .75rem 1.35rem;
font-size: 14px;
}
}
/* Mobile-only tweaks for the home page content sections */
@media (max-width: 767.98px) {
/* Partner heading: drop the desktop line break on phone. */
.home-partner__title br { display: none; }
/* Challenge stats: one per row on phone. */
.home-challenge__stat {
flex: 0 0 100%;
max-width: 100%;
}
}
.home-hero__kicker {
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--nvs-red);
margin-bottom: 1rem;
}
.home-hero__title {
font-size: clamp(42px, 4.6vw, 62px);
line-height: 1.05;
padding-bottom: .15em;
margin-bottom: 0;
background: linear-gradient(135deg, var(--nvs-navy) 0%, var(--nvs-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.home-hero__sub {
color: var(--nvs-navy);
max-width: 540px;
font-size: var(--nvs-p);
line-height: 1.6;
margin-top: .75rem;
}
.home-hero__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 992px) {
.home-hero__media {
align-items: flex-start;
align-self: stretch;
}
}
.home-hero__render-img {
width: 100%;
max-width: 100%;
max-height: calc(max(600px, 100vh) - var(--nvs-header-height) - 4rem);
height: auto;
object-fit: contain;
display: block;
}
/* Hero content fade + rise on load, staggered by child. */
@keyframes home-hero-in {
from { opacity: 0; transform: translate3d(0, 10px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.home-hero__anim {
opacity: 0;
will-change: opacity, transform;
animation: home-hero-in 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}
.home-hero__anim--1 { animation-delay: .10s; }
.home-hero__anim--2 { animation-delay: .25s; }
.home-hero__anim--3 { animation-delay: .55s; }
.home-hero__anim--4 { animation-delay: .85s; }
.home-hero__anim--5 { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
.home-hero__anim { animation: none; opacity: 1; }
}
@media (max-width: 991.98px) {
.home-hero__media { justify-content: flex-start; }
.home-hero__render-img {
max-width: 360px;
max-height: 360px;
margin: 0;
}
}
/* CTA sits directly beneath the copy */
.home-hero__cta { margin-top: 0; }
.home-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2.5rem;
}
.home-hero__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid currentColor;
margin-right: .1rem;
}
.home-hero__cta-icon svg { width: 10px; height: 10px; margin-left: 2px; }
/* Footer row inside the container: group logos on the left, scroll
indicator pushed to the right. */
.home-hero__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
margin-top: 4.75rem;
}
.home-hero__logos {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.home-hero__logo { line-height: 0; }
.home-hero__logo img {
height: 64px;
width: auto;
max-width: 240px;
object-fit: contain;
display: block;
}
/* Every logo except the first sits 5px lower and a touch larger/wider. */
.home-hero__logo:not(:first-child) { margin-top: 5px; }
.home-hero__logo:not(:first-child) img {
height: 70px;
max-width: 260px;
}
@media (max-width: 575.98px) {
.home-hero__logo img { height: 46px; }
.home-hero__logo:not(:first-child) img { height: 50px; }
/* Company logos become a horizontal swipe carousel that bleeds off the
right edge of the screen. Scroll/drag only — no nav arrows. */
.home-hero__logos {
flex: 1 1 100%;
flex-wrap: nowrap;
align-items: center;
gap: 2.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* extend the track past the container's right padding to the viewport edge */
margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
.home-hero__logos::-webkit-scrollbar { display: none; }
.home-hero__logo { flex: 0 0 auto; }
}
/* Scroll-down indicator sits at the bottom of the hero, navy on white. */
.home-hero__footer {
display: flex;
justify-content: center;
padding-bottom: 1.5rem;
}
.home-hero__scroll { text-decoration: none; }
.home-hero__scroll-icon {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
color: var(--nvs-navy);
align-items: center;
justify-content: center;
border: 1.5px solid var(--nvs-navy);
transition: background-color .2s ease, transform .2s ease;
}
.home-hero__scroll:hover .home-hero__scroll-icon {
background: var(--nvs-navy);
color: var(--nvs-white);
transform: translateY(3px);
}
/* -----------------------------------------------------------
* Stats row — number + label + coloured underline
* --------------------------------------------------------- */
.stats-row { padding: 3rem 0; }
.stat-block {
padding: 1rem 0;
}
.stat-block__num {
font-family: var(--nvs-font-heading);
font-size: clamp(40px, 4vw, 60px);
color: var(--nvs-navy);
display: block;
margin-bottom: .25rem;
line-height: 1;
}
.stat-block__label {
color: var(--nvs-navy);
font-size: 14px;
max-width: 220px;
}
.stat-block .accent { margin-top: .75rem; }
/* Extra breathing room above the Who Are We section, sitting just
under the hero on the home page. */
.who-are-we { padding-top: 3rem !important; }
/* -----------------------------------------------------------
* Who Are We — both columns share a single height (driven by the
* right column's natural content height). The video on the left
* stretches to fill that height; the side image on the right
* grows to fill whatever's left after the kicker/title/body. The
* "Our Story" CTA sits flush in the bottom-right corner with a
* white L-shaped frame creating space on its top + left edges.
* --------------------------------------------------------- */
.who-are-we .row { align-items: center; }
.who-are-we__col-right {
display: flex;
flex-direction: column;
justify-content: center; /* vertically centre content against the left image */
}
.who-are-we__body { max-width: 42ch; }
/* CTA sits inline (auto width) rather than stretching the flex column */
.who-are-we__cta { align-self: flex-start; }
/* Left column — video stretches to match the column height (no fixed
aspect ratio fight) */
.who-are-we > .container > .row > .col-12:first-child { display: flex; }
.who-are-we .video-thumb {
aspect-ratio: auto;
width: 100%;
flex: 0 0 auto;
height: 442px;
}
.who-are-we .video-thumb > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Right column — secondary image fixed height (large enough to read
the houses clearly + leave room for the CTA frame). */
.who-are-we__image-wrap {
position: relative;
overflow: hidden;
margin-top: auto;
height: 240px;
}
.who-are-we__image-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* CTA: button flush bottom-right of the image wrap; the white frame
wrapping it adds padding above and to the left only — creating an
L-shape of white space against the image, with the button corner
itself flush. */
.who-are-we__cta-frame {
position: absolute;
right: 0;
bottom: 0;
padding: 10px 0 0 10px;
background: var(--nvs-white);
}
.who-are-we__image-cta {
display: block;
margin: 0;
}
/* -----------------------------------------------------------
* Home quote — large slab heading + body paragraph split
* --------------------------------------------------------- */
.home-quote { padding-top: 6.5rem; padding-bottom: 3rem; }
.home-quote__title {
font-size: clamp(28px, 3vw, 38px);
line-height: 1.15;
color: var(--nvs-navy);
}
.home-quote__body { color: var(--nvs-navy); }
/* -----------------------------------------------------------
* Two-up image with play button (Who Are We / Team)
* --------------------------------------------------------- */
.video-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16/10;
}
.video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-thumb__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
color: var(--nvs-navy);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
border: 0;
transition: transform .2s ease;
}
.video-thumb:hover .video-thumb__play { transform: translate(-50%, -50%) scale(1.05); }
/* -----------------------------------------------------------
* Four-up service columns (Land/Design/Construction/Customer)
* --------------------------------------------------------- */
.services-row { padding: 3rem 0; }
.service-col {
padding: 1.25rem 0;
}
.service-col__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 20px;
margin-bottom: .75rem;
}
.service-col__body {
font-size: 14px;
color: var(--nvs-navy);
}
.service-col__link {
display: inline-block;
margin-top: .75rem;
font-family: var(--nvs-font-heading);
font-size: 15px;
color: var(--nvs-navy);
text-decoration: none;
}
.service-col__link:hover {
color: var(--nvs-red);
text-decoration: none;
}
/* Contact cross-links — bigger headings, more space below the link
(the accent underline), and bigger section padding overall. */
.contact-page__crosslinks {
padding-top: 8rem;
padding-bottom: 8rem;
}
.contact-page__crosslinks .service-col__title {
font-size: 26px;
margin-bottom: 1rem;
}
.contact-page__crosslinks .service-col__body { font-size: 16px; }
.contact-page__crosslinks .service-col__link {
margin-bottom: 2.5rem;
}
/* Accent under each service — same look as the stats underline */
.service-col .accent {
width: 100%;
height: 6px;
margin-top: 1.75rem;
}
/* -----------------------------------------------------------
* Image cards with coloured stripe + overlay title
* (CSR row on About, Projects on Home)
* --------------------------------------------------------- */
.image-card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4/5;
color: var(--nvs-white);
text-decoration: none;
}
.image-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.image-card:hover img { transform: scale(1.04); }
.image-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(49,25,74,0) 50%, rgba(49,25,74,0.75) 100%);
}
.image-card__body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.75rem 1.75rem 1.5rem;
z-index: 2;
color: var(--nvs-white);
}
.image-card__title {
font-family: var(--nvs-font-heading);
font-size: 20px;
color: var(--nvs-white);
margin: 0 0 .5rem;
line-height: 1.2;
min-height: calc(2 * 1.2em);
}
.image-card__stripe {
display: block;
width: 100%;
height: 4px;
background: var(--nvs-red);
}
.image-card--red .image-card__stripe { background: var(--nvs-red); }
.image-card--yellow .image-card__stripe { background: var(--nvs-yellow); }
.image-card--teal .image-card__stripe { background: var(--nvs-teal); }
.image-card--navy .image-card__stripe { background: var(--nvs-navy); }
/* -----------------------------------------------------------
* Companies grid — square cards: background image, company logo
* bottom-left, coloured square arrow bottom-right.
* --------------------------------------------------------- */
.company-card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1024 / 768;
color: var(--nvs-white);
text-decoration: none;
}
/* Homepage cards a touch taller than the archive's. */
.companies-section--home .company-card { aspect-ratio: 1024 / 860; }
/* Archive cards ~25% shorter. */
.companies-section--archive .company-card { aspect-ratio: 1024 / 576; }
/* Wider gutters between cards, and less space above the grid. */
.companies-section { padding-top: 1.5rem !important; }
.companies-section .row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; }
@media (max-width: 767.98px) {
.companies-section { padding-top: 0 !important; }
}
.company-card__media,
.company-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.company-card__media img {
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.company-card:hover .company-card__media img { transform: scale(1.04); }
.company-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(49,25,74,0) 45%, rgba(49,25,74,0.72) 100%);
z-index: 1;
}
.company-card__logo {
position: absolute;
left: 1.5rem;
bottom: 1.5rem;
right: 4.5rem;
z-index: 2;
line-height: 0;
}
.company-card__logo img {
max-height: 58px;
max-width: 190px;
width: auto;
object-fit: contain;
}
.company-card__arrow {
position: absolute;
right: 1.25rem;
bottom: 1.25rem;
z-index: 3;
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: var(--nvs-red);
color: var(--nvs-white);
font-size: 20px;
transition: transform .15s ease;
}
.company-card:hover .company-card__arrow { transform: translate(2px, -2px); }
.company-card--red .company-card__arrow { background: var(--nvs-red); }
.company-card--yellow .company-card__arrow { background: var(--nvs-yellow); }
.company-card--teal .company-card__arrow { background: var(--nvs-teal); }
.company-card--navy .company-card__arrow { background: var(--nvs-navy); }
.company-card--green .company-card__arrow { background: var(--nvs-green); }
/* -----------------------------------------------------------
* Projects section — header + horizontal track of tiles. One tile
* is "active" (wide, with title on the bottom); the rest are narrow
* with titles rotated vertically.
* --------------------------------------------------------- */
.projects-section { overflow: hidden; }
.projects-section__body { max-width: 60ch; }
/* Header prev/next circle buttons — outlined navy with chevron.
Sized + stroked to feel like the hero scroll + hiring CTA chevrons. */
.projects-section__nav {
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--nvs-navy);
color: var(--nvs-navy);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.projects-section__nav:hover {
background: var(--nvs-navy);
color: var(--nvs-white);
}
/* Track — full-viewport horizontal scroller; the active tile is then
aligned to the container's left edge via JS so that the rest bleed
into the left + right gutters. */
.projects-track {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.projects-track::-webkit-scrollbar { display: none; }
.projects-track { scrollbar-width: none; }
/* Tile — base */
.project-tile {
position: relative;
display: block;
flex: 0 0 auto;
width: 220px;
height: 400px;
overflow: hidden;
color: var(--nvs-white);
text-decoration: none;
scroll-snap-align: start;
transition: width .35s ease;
}
.project-tile.is-active { width: min(700px, 62vw); }
@media (max-width: 767.98px) {
.project-tile { width: 180px; height: 320px; }
.project-tile.is-active { width: 300px; }
}
.project-tile__media,
.project-tile__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.project-tile__media img {
object-fit: cover;
display: block;
}
.project-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(49,25,74,0) 50%, rgba(49,25,74,0.7) 100%);
z-index: 1;
}
/* Single corner arrow — bottom-right only. Filled red on active, teal otherwise. */
.project-tile__arrow {
position: absolute;
z-index: 3;
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--nvs-white);
font-size: 20px;
background: var(--nvs-teal);
border: 1px solid var(--nvs-teal);
transition: background-color .15s ease, border-color .15s ease;
}
.project-tile__arrow--br { bottom: 1.5rem; right: 1.5rem; }
.project-tile.is-active .project-tile__arrow {
background: var(--nvs-red);
border-color: var(--nvs-red);
}
/* Titles — horizontal shown on active, vertical shown on inactive */
.project-tile__title {
position: absolute;
z-index: 2;
color: var(--nvs-white);
font-family: var(--nvs-font-heading);
margin: 0;
}
.project-tile__title--horizontal {
left: 1.75rem;
right: 5.5rem;
bottom: 1.75rem;
font-size: 24px;
line-height: 1.15;
display: none;
}
.project-tile__title--vertical {
left: 1.5rem;
bottom: 1.5rem;
font-size: 18px;
line-height: 1.15;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.project-tile.is-active .project-tile__title--horizontal { display: block; }
.project-tile.is-active .project-tile__title--vertical { display: none; }
/* -----------------------------------------------------------
* Projects archive — large tile cards (same look as the active
* tile in the home projects carousel).
* --------------------------------------------------------- */
.project-archive-tile {
position: relative;
display: block;
width: 100%;
height: 380px;
overflow: hidden;
color: var(--nvs-white);
text-decoration: none;
}
/* Projects archive intro — slightly larger heading without affecting
the About → Our Mission title (which uses the same wrapper section). */
.projects-intro {
padding-top: 6rem;
padding-bottom: 2rem;
}
.projects-intro__title {
font-size: 30px;
line-height: 1.2;
}
.project-archive-tile__media,
.project-archive-tile__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.project-archive-tile__media img {
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.project-archive-tile:hover .project-archive-tile__media img { transform: scale(1.04); }
.project-archive-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(49,25,74,0) 50%, rgba(49,25,74,0.7) 100%);
z-index: 1;
}
.project-archive-tile__title {
position: absolute;
left: 1.75rem;
right: 5.5rem;
bottom: 1.75rem;
z-index: 2;
color: var(--nvs-white);
font-family: var(--nvs-font-heading);
font-size: 24px;
line-height: 1.15;
margin: 0;
}
.project-archive-tile__arrow {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
z-index: 3;
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: var(--nvs-red);
border: 1px solid var(--nvs-red);
color: var(--nvs-white);
font-size: 20px;
transition: transform .15s ease;
}
.project-archive-tile:hover .project-archive-tile__arrow { transform: translate(2px, -2px); }
/* CSR variant — taller, with the arrow in the top-right (teal),
and a touch more inner padding around the title + arrow. */
.project-archive-tile--csr { height: 440px; }
.project-archive-tile--csr .project-archive-tile__title {
left: 2.25rem;
right: 2.25rem;
bottom: 2.25rem;
}
.project-archive-tile--csr .project-archive-tile__arrow {
bottom: auto;
top: 2rem;
right: 2rem;
background: var(--nvs-teal);
border-color: var(--nvs-teal);
color: var(--nvs-white);
}
/* About → CSR section: the same CSR tiles laid out four-up. Tiles are
narrower than the archive's two-up cards, so trim the height, padding
and title size, and reserve at least two lines for the title so every
card aligns regardless of how short its heading is. */
.about-csr__grid .project-archive-tile--csr { height: 360px; }
.about-csr__grid .project-archive-tile--csr .project-archive-tile__title {
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
font-size: 20px;
}
.about-csr__grid .project-archive-tile--csr .project-archive-tile__title span {
display: block;
min-height: 2.3em; /* keeps short titles two lines tall */
}
.about-csr__grid .project-archive-tile--csr .project-archive-tile__arrow {
top: 1.5rem;
right: 1.5rem;
}
/* -----------------------------------------------------------
* Posts carousel — 3-up horizontal scroller of news posts. Same
* header + nav pattern as the projects carousel.
* --------------------------------------------------------- */
.posts-carousel { overflow: hidden; }
/* Tighten the gap when the testimonials section follows directly. */
.posts-carousel + .testimonials-section { padding-top: 2rem; }
.posts-carousel__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.posts-carousel__track::-webkit-scrollbar { display: none; }
.posts-carousel__track { scrollbar-width: none; }
.posts-carousel__card {
flex: 0 0 calc((100% - 3rem) / 3);
min-width: 280px;
scroll-snap-align: start;
background: transparent;
}
.posts-carousel__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 3/2;
}
.posts-carousel__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.posts-carousel__card:hover .posts-carousel__media img { transform: scale(1.04); }
.posts-carousel__body { padding: 1.25rem 0; }
.posts-carousel__title {
font-family: var(--nvs-font-heading);
font-size: 18px;
color: var(--nvs-navy);
margin: 0;
line-height: 1.25;
}
.posts-carousel__title a { color: inherit; text-decoration: none; }
.posts-carousel__title a:hover { color: var(--nvs-red); }
.posts-carousel__date {
color: var(--nvs-grey-600);
font-size: 13px;
margin: .75rem 0 0;
}
/* -----------------------------------------------------------
* News split — featured posts (left) + recent updates list (right)
* --------------------------------------------------------- */
.news-split { padding: 3rem 0; }
.news-split__heading { margin: 0 0 2rem; }
.news-card {
background: transparent;
border: 0;
overflow: visible;
height: 100%;
}
.news-card__thumb { position: relative; display: block; overflow: hidden; }
.news-card__thumb img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
}
.news-card__tag {
position: absolute;
top: 14px;
right: 14px;
background: var(--nvs-yellow);
color: var(--nvs-navy);
font-family: var(--nvs-font-heading);
font-size: 13px;
padding: .35rem .75rem;
border-radius: 0;
}
.news-card__body { padding: 1.25rem 0; }
.news-card__date {
color: var(--nvs-grey-600);
font-size: 13px;
margin: .75rem 0 0;
}
.news-card__title {
font-size: 18px;
margin: 0;
color: var(--nvs-navy);
line-height: 1.25;
}
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--nvs-red); }
.update-list { list-style: none; padding: 0; margin: 0; }
.update-list__item {
border-bottom: 1px solid var(--nvs-grey-300);
padding: 1.25rem 0;
}
.update-list__item:first-child { padding-top: 0; }
.update-list__item:last-child { border-bottom: 0; }
.update-list__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
text-decoration: none;
}
.update-list__title {
font-family: var(--nvs-font-heading);
font-size: 18px;
color: var(--nvs-navy);
margin: 0;
}
.update-list__date { color: var(--nvs-grey-600); font-size: 12px; }
.update-list__btn {
flex-shrink: 0;
width: 50px;
height: 50px;
background: var(--nvs-navy);
color: var(--nvs-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: background-color .15s ease;
}
.update-list__row:hover .update-list__btn { background: var(--nvs-red); }
/* -----------------------------------------------------------
* News page — title + filter toggle bar above the grid
* --------------------------------------------------------- */
.news-bar__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 24px;
line-height: 1.2;
}
.news-bar__toggle {
display: inline-flex;
align-items: center;
gap: .75rem;
height: 48px;
}
/* -----------------------------------------------------------
* Filter offcanvas — slides from the right on desktop, from the
* bottom on mobile (override Bootstrap's translateX on phones).
* --------------------------------------------------------- */
.news-filter-panel {
background: var(--nvs-white);
width: min(420px, 100vw);
}
.news-filter-panel .offcanvas-header {
border-bottom: 1px solid var(--nvs-grey-300);
padding: 1.25rem 1.5rem;
}
.news-filter-panel__heading {
font-size: 18px;
color: var(--nvs-navy);
}
.news-filter-panel .offcanvas-body { padding: 1.5rem; }
/* Mobile: slide up from the bottom instead of from the right */
@media (max-width: 767.98px) {
.news-filter-panel.offcanvas-end {
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
height: auto;
max-height: 85vh;
border-top: 1px solid var(--nvs-grey-300);
transform: translateY(100%);
}
.news-filter-panel.offcanvas-end.showing,
.news-filter-panel.offcanvas-end.show { transform: none; }
}
/* Outline-navy button variant for the Reset link */
.btn-outline-navy {
background: transparent;
color: var(--nvs-navy);
border: 1px solid var(--nvs-navy);
}
.btn-outline-navy:hover { background: transparent; color: var(--nvs-red); border-color: var(--nvs-red); }
/* -----------------------------------------------------------
* Filter fields — Topic / Date / Search (used inside offcanvas)
* --------------------------------------------------------- */
.news-filters__label {
display: block;
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 600;
color: var(--nvs-navy);
margin: 0 0 .5rem;
}
.news-filters__field {
display: block;
width: 100%;
height: 56px;
padding: 0 1.25rem;
border: 1px solid var(--nvs-grey-300);
border-radius: 0;
background: var(--nvs-white);
color: var(--nvs-navy);
font-family: var(--nvs-font-body);
font-size: 15px;
line-height: 1;
appearance: none;
-webkit-appearance: none;
}
select.news-filters__field {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 14px;
padding-right: 2.75rem;
}
.news-filters__field:focus {
outline: none;
border-color: var(--nvs-teal);
box-shadow: 0 0 0 .15rem rgba(101,156,187,.25);
}
.news-filters__field::placeholder { color: rgba(49,25,74,.5); }
/* -----------------------------------------------------------
* Team cards — photo + name + position + LinkedIn icon
* --------------------------------------------------------- */
.team-card {
background: var(--nvs-white);
display: flex;
flex-direction: column;
}
.team-card__photo {
position: relative;
overflow: hidden;
aspect-ratio: 4/5;
background: var(--nvs-grey-100);
}
.team-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card__body {
padding: 1.25rem 0 0;
position: relative;
}
.team-card__name {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
margin: 0;
line-height: 1.2;
}
.team-card__position {
color: var(--nvs-grey-600);
font-size: 14px;
margin: .25rem 0 0;
}
.team-card__linkedin {
position: absolute;
top: 1.25rem;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--nvs-navy) !important;
font-size: 22px;
line-height: 1;
background: transparent;
border: 0;
padding: 0;
text-decoration: none;
transition: color .15s ease;
}
.team-card__linkedin:hover { color: var(--nvs-red) !important; }
/* About + Meet the Team intro sections — extra breathing room above */
.about-intro { padding-top: 5rem !important; }
/* About — Team split: wider gap between image and content on desktop. */
@media (min-width: 992px) {
.about-team .row { --bs-gutter-x: 4rem; }
}
/* -----------------------------------------------------------
* Contact page — title + details row, then 2-step form section.
* --------------------------------------------------------- */
.contact-page__intro {
position: relative;
}
/* Grid pattern + bottom fade live on a pseudo-element so the mask
only affects the grid, not the title / details text. */
.contact-page__intro::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(49,25,74,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(49,25,74,0.05) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.contact-page__intro > .container { position: relative; z-index: 1; }
/* Breadcrumb — same shape as .page-hero__breadcrumb on inner pages,
teal because it sits on a light background instead of a navy hero. */
.contact-page__breadcrumb {
font-size: 13px;
color: var(--nvs-teal);
margin-bottom: 1rem;
}
.contact-page__breadcrumb a {
color: var(--nvs-teal);
text-decoration: none;
}
.contact-page__breadcrumb a:hover { color: var(--nvs-navy); }
.contact-page__breadcrumb-sep { margin: 0 .35rem; }
.contact-page__title {
font-size: clamp(36px, 4vw, 48px);
color: var(--nvs-navy);
margin: 0 0 2.5rem;
}
/* Labels are larger / bolder than the content below them */
.contact-page__details { margin-top: 1.5rem; }
.contact-page__label {
font-size: 16px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
color: var(--nvs-navy);
margin: 0 0 .75rem;
}
.contact-page__details p { font-size: var(--nvs-p); line-height: 1.5; color: var(--nvs-navy); }
.contact-page__details a {
color: var(--nvs-navy);
text-decoration: none;
}
.contact-page__details a:hover { color: var(--nvs-red); }
/* Form wrap = plain (no full-width band), inner box has the grey fill + padding.
Pulled up slightly so it overlaps the faded grid pattern above. */
.contact-page__form-wrap {
background: transparent;
margin-top: -3rem;
position: relative;
z-index: 1;
}
.contact-page__form-box {
background: var(--nvs-grey-100);
padding: 3rem;
}
@media (max-width: 575.98px) {
.contact-page__form-box { padding: 1.75rem; }
}
.contact-page__form-title {
color: var(--nvs-navy);
font-size: clamp(24px, 2.5vw, 30px);
}
/* -----------------------------------------------------------
* Single post template
* --------------------------------------------------------- */
.single-post-page .contact-page__title {
font-size: clamp(28px, 3vw, 38px);
}
@media (min-width: 992px) {
.single-post-page .contact-page__title { max-width: 65%; }
}
/* Tighter gap between the intro (breadcrumb/title/meta) and the
body content below it. */
.single-post-page .contact-page__intro > .container { padding-bottom: 1.25rem !important; }
.single-post-page > .container { padding-top: 1.5rem !important; }
.single-post-page .single-post-thumb { margin-top: 0; }
.single-post-meta .contact-page__label {
font-size: 12px;
letter-spacing: .12em;
margin: 0 0 .35rem;
}
.single-post-meta p { color: var(--nvs-navy); font-size: 15px; }
.single-post-thumb {
margin-top: -1rem;
margin-bottom: 2.5rem;
}
.single-post-thumb img { display: block; }
.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
color: var(--nvs-navy);
margin-top: 2rem;
margin-bottom: 1rem;
}
.single-post-content h2 { font-size: 22px; }
.single-post-content h3 { font-size: 20px; }
.single-post-content > h2:first-child,
.single-post-content > h3:first-child { margin-top: 0; }
.single-post-content p { margin-bottom: 1.25rem; line-height: 1.7; color: var(--nvs-navy); }
.single-post-content blockquote {
border-left: 0;
margin: 2rem 0;
padding: 0;
font-family: var(--nvs-font-heading);
font-size: 22px;
color: var(--nvs-navy);
line-height: 1.35;
}
.single-post-content blockquote p { font-family: inherit; font-size: inherit; }
.single-post-content blockquote cite,
.single-post-content blockquote footer {
display: block;
margin-top: .75rem;
font-family: var(--nvs-font-body);
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nvs-grey-600);
font-style: normal;
}
.single-post-content img { max-width: 100%; height: auto; display: block; margin: 1.5rem 0; }
.single-post-content .wp-block-gallery,
.single-post-content .gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
.single-post-content .wp-block-gallery img,
.single-post-content .gallery img { width: 100%; margin: 0; }
/* Share buttons */
.single-post-share { padding-top: 1.5rem; border-top: 1px solid var(--nvs-grey-300); }
.single-post-share__label {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
color: var(--nvs-navy);
margin: 0 0 .75rem;
}
.single-post-share__list {
list-style: none;
display: flex;
gap: .5rem;
margin: 0;
padding: 0;
}
.single-post-share__list a {
display: inline-flex;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--nvs-navy);
color: var(--nvs-white);
align-items: center;
justify-content: center;
font-size: 14px;
text-decoration: none;
transition: background-color .15s ease;
}
.single-post-share__list a:hover { background: var(--nvs-red); color: var(--nvs-white); }
/* Jump to Section sidebar */
.single-post-toc {
position: relative;
}
.single-post-toc__heading {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 18px;
margin: 0 0 1rem;
}
.single-post-toc__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
}
.single-post-toc__list li { margin-bottom: .85rem; }
.single-post-toc__list a {
display: block;
font-size: 14px;
color: var(--nvs-navy);
text-decoration: none;
line-height: 1.4;
padding-left: 0;
}
.single-post-toc__list a:hover { color: var(--nvs-red); }
.single-post-toc__list a.is-current {
font-weight: 700;
color: var(--nvs-navy);
}
.single-post-toc__list .is-h3 { padding-left: 1rem; }
@media (min-width: 992px) {
.single-post-toc__inner {
position: sticky;
top: calc(var(--nvs-header-height) + 1.5rem);
}
}
.single-post-toc.is-empty { display: none; }
/* -----------------------------------------------------------
* CSR single — feature section (image + content split + highlights)
* Sits above the job openings carousel. Image position can flip
* left/right via .csr-feature--left / .csr-feature--right.
* --------------------------------------------------------- */
.csr-feature__row { margin-bottom: 2.5rem; }
.csr-feature--right .csr-feature__row { flex-direction: row-reverse; }
@media (max-width: 991.98px) {
.csr-feature--right .csr-feature__row { flex-direction: column; }
}
.csr-feature__media { overflow: hidden; }
.csr-feature__media img,
.csr-feature__img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.csr-feature__title {
font-family: var(--nvs-font-heading);
font-size: clamp( 26px, 2.6vw, 34px );
color: var(--nvs-navy);
margin: 0 0 1.25rem;
line-height: 1.15;
}
.csr-feature__para {
color: var(--nvs-navy);
font-size: 15px;
line-height: 1.7;
margin-bottom: 1rem;
}
.csr-feature__para:last-child { margin-bottom: 0; }
.csr-feature__highlights {
margin-top: 4rem;
margin-bottom: 3rem;
}
.csr-feature__highlights-heading {
font-family: var(--nvs-font-heading);
font-size: 24px;
color: var(--nvs-navy);
margin: 0 0 1.5rem;
}
.csr-feature__highlight {
display: flex;
align-items: flex-start;
gap: 1rem;
color: var(--nvs-navy);
}
.csr-feature__highlight-icon {
font-size: 30px;
color: var(--nvs-navy);
line-height: 1;
margin-top: 0;
flex-shrink: 0;
}
.csr-feature__highlight-text {
font-size: 15px;
line-height: 1.5;
font-weight: 600;
}
/* -----------------------------------------------------------
* Targets and Goals — repeater carousel of cards.
* Card background is the same subtle grid pattern as testimonial
* cards. 2-up on desktop, 1-up on mobile, with prev/next nav.
* --------------------------------------------------------- */
.targets__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.targets__track::-webkit-scrollbar { display: none; }
.targets__track { scrollbar-width: none; }
.targets-card {
flex: 0 0 calc((100% - 1.5rem) / 2);
min-width: 280px;
scroll-snap-align: start;
background-color: var(--nvs-grey-100);
background-image:
linear-gradient(rgba(49,25,74,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(49,25,74,0.05) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--nvs-navy);
padding: 2rem 2.5rem 2.5rem;
display: flex;
flex-direction: column;
}
@media (max-width: 767.98px) {
.targets-card { flex: 0 0 85%; padding: 1.75rem; }
}
.targets-card__icon {
display: inline-flex;
font-size: 32px;
color: var(--nvs-navy);
line-height: 1;
margin-bottom: 1.5rem;
}
.targets-card__title {
font-family: var(--nvs-font-heading);
font-size: 22px;
color: var(--nvs-navy);
margin: 0 0 1rem;
line-height: 1.2;
}
.targets-card__body,
.targets-card__body p {
color: var(--nvs-navy);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.targets-card__body p + p { margin-top: .75rem; }
/* -----------------------------------------------------------
* Company "Working with…" checklist — icon + title + body in a
* two-column grid (single Company page).
* --------------------------------------------------------- */
.company-check {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.company-check__icon {
flex: 0 0 auto;
font-size: 28px;
line-height: 1;
color: var(--nvs-navy);
margin-top: .25rem;
}
.company-check__title {
font-family: var(--nvs-font-heading);
font-size: 22px;
color: var(--nvs-navy);
line-height: 1.25;
margin: 0 0 1rem;
}
.company-check__body,
.company-check__body p {
font-size: 15px;
line-height: 1.6;
color: var(--nvs-navy);
margin: 0;
}
.company-check__body p + p { margin-top: .75rem; }
/* Company Contact Us block (single Company page). */
.company-contact { margin-bottom: 4rem; }
.company-contact__lead {
font-size: var(--nvs-p);
line-height: 1.5;
color: var(--nvs-grey-600);
max-width: 36rem;
}
.company-contact .contact-page__details { margin-top: 2.5rem; }
/* -----------------------------------------------------------
* Sustainability Roadmap — horizontal timeline carousel.
* A horizontal line runs across the middle; cards alternate above
* and below with a coloured marker on the line connecting each.
* --------------------------------------------------------- */
.roadmap { overflow: hidden; }
.roadmap__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-left: max(.75rem, calc((100vw - 1350px) / 2 + .75rem));
padding-right: max(.75rem, calc((100vw - 1350px) / 2 + .75rem));
position: relative;
-webkit-overflow-scrolling: touch;
}
.roadmap__track::-webkit-scrollbar { display: none; }
.roadmap__track { scrollbar-width: none; }
.roadmap__item {
position: relative;
flex: 0 0 calc((100% - 4.5rem) / 4);
min-width: 240px;
height: 480px;
scroll-snap-align: start;
}
@media (max-width: 991.98px) {
.roadmap__item { flex: 0 0 280px; }
}
/* Horizontal centre line — drawn per-item so it spans the visible item */
.roadmap__item::before {
content: "";
position: absolute;
left: -.75rem;
right: -.75rem;
top: 50%;
height: 1px;
background: var(--nvs-grey-300);
}
/* Coloured square marker on the line */
.roadmap__marker {
position: absolute;
top: calc(50% - 7px);
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
background: var(--nvs-red);
z-index: 2;
}
.roadmap__item--red .roadmap__marker { background: var(--nvs-red); }
.roadmap__item--yellow .roadmap__marker { background: var(--nvs-yellow); }
.roadmap__item--teal .roadmap__marker { background: var(--nvs-teal); }
.roadmap__item--navy .roadmap__marker { background: var(--nvs-navy); }
/* Pole connecting the marker to the card — touches the card edge */
.roadmap__pole {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: var(--nvs-navy);
height: 60px;
}
.roadmap__item--above .roadmap__pole { bottom: 50%; top: auto; }
.roadmap__item--below .roadmap__pole { top: 50%; }
/* Card body — light grey block sits flush against the end of the pole */
.roadmap__card {
position: absolute;
left: 0;
right: 0;
background: var(--nvs-grey-100);
padding: 1.5rem;
color: var(--nvs-navy);
}
.roadmap__item--above .roadmap__card { bottom: calc(50% + 60px); }
.roadmap__item--below .roadmap__card { top: calc(50% + 60px); }
.roadmap__title {
font-family: var(--nvs-font-heading);
font-size: 18px;
color: var(--nvs-navy);
margin: 0 0 .5rem;
text-align: center;
line-height: 1.2;
}
.roadmap__body,
.roadmap__body p {
color: var(--nvs-navy);
font-size: 15px;
line-height: 1.55;
text-align: center;
}
.roadmap__body p { margin: 0; }
/* -----------------------------------------------------------
* Quality grid — commitment block + image cards (3-up)
* --------------------------------------------------------- */
.quality-card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4/4.2;
color: var(--nvs-white);
text-decoration: none;
}
.quality-card > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.quality-card:hover > img { transform: scale(1.04); }
.quality-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(49,25,74,0) 50%, rgba(49,25,74,0.7) 100%);
z-index: 1;
}
.quality-card__title {
position: absolute;
left: 2rem;
right: 5.5rem;
bottom: 2rem;
z-index: 2;
color: var(--nvs-white);
font-family: var(--nvs-font-heading);
font-size: 22px;
line-height: 1.2;
margin: 0;
}
.quality-card__arrow {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 3;
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: var(--nvs-red);
color: var(--nvs-white);
font-size: 18px;
transition: background-color .15s ease;
}
.quality-card:hover .quality-card__arrow { background: var(--nvs-red-dark); }
/* Commitment cell (first card) — light grey, badge top, text bottom-left
aligned with the other cards' titles. No gradient overlay. */
.quality-card--commitment {
background: var(--nvs-grey-200);
color: var(--nvs-navy);
display: flex;
flex-direction: column;
padding: 2rem;
aspect-ratio: 4/4.2;
}
.quality-card--commitment::after { display: none; }
.quality-card--commitment .quality-card__badge {
width: 110px;
height: auto;
align-self: flex-start;
margin: auto 0 1rem;
}
.quality-card--commitment .quality-card__kicker {
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 700;
color: var(--nvs-navy);
margin: 0 0 .75rem;
}
.quality-card--commitment .quality-card__heading {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
line-height: 1.2;
margin: 0;
}
/* -----------------------------------------------------------
* Single project — repeating 5/7 split sections + stats + standards
* + testimonial + gallery
* --------------------------------------------------------- */
.single-project-page .contact-page__title {
font-size: clamp(32px, 3.4vw, 44px);
}
@media (min-width: 992px) {
.single-project-page .contact-page__title { max-width: 100%; }
}
.single-project__details .contact-page__label { margin-bottom: .35rem; }
.single-project__details p { font-size: 15px; }
/* Generic 5/7 split repeated throughout the page */
.project-split { padding: 3rem 0; }
.project-split__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 24px;
line-height: 1.2;
margin: .25rem 0 0;
}
.project-split__body p { margin-bottom: 1.25rem; color: var(--nvs-navy); line-height: 1.65; }
.project-split__body p:last-child { margin-bottom: 0; }
/* Stats row inside single project — 3 stats with coloured underline */
.project-stats { padding: 2rem 0 3rem; }
.project-stat .stat-block__num {
font-size: clamp(40px, 4vw, 56px);
}
.project-stat .stat-block__label { max-width: 100%; }
.project-stat .accent { height: 4px; margin-top: 1.25rem; }
/* Standards & accreditations list */
.project-standards__list {
list-style: none;
margin: 0;
padding: 0;
}
.project-standards__list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
color: var(--nvs-navy);
font-size: 16px;
line-height: 1.5;
}
.project-standards__bullet {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: .35rem;
background: var(--nvs-red);
}
.project-standards__bullet--red { background: var(--nvs-red); }
.project-standards__bullet--yellow { background: var(--nvs-yellow); }
.project-standards__bullet--teal { background: var(--nvs-teal); }
.project-standards__bullet--navy { background: var(--nvs-navy); }
/* Testimonial block (light grey band) */
.project-testimonial {
background: var(--nvs-grey-100);
margin-top: 3rem;
margin-bottom: 3rem;
}
.project-testimonial__quote {
font-family: var(--nvs-font-heading);
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.3;
color: var(--nvs-navy);
margin: 0;
}
.project-testimonial__author {
margin: 1.25rem 0 0;
font-size: 13px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--nvs-navy);
}
/* Project gallery — horizontal scroller, 2-up on desktop */
.project-gallery__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 max(1rem, calc((100vw - 1350px) / 2 + 0.75rem)) 1rem;
-webkit-overflow-scrolling: touch;
}
.project-gallery__track::-webkit-scrollbar { display: none; }
.project-gallery__track { scrollbar-width: none; }
.project-gallery__item {
flex: 0 0 calc((100% - 1.5rem) / 2);
min-width: 280px;
margin: 0;
scroll-snap-align: start;
}
.project-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4/3;
}
@media (max-width: 767.98px) {
.project-gallery__item { flex: 0 0 85%; }
}
/* -----------------------------------------------------------
* Single career — meta below title, Apply Online form right.
* --------------------------------------------------------- */
.single-career__meta {
margin: 0;
padding: 0;
gap: 1.5rem;
}
/* Red variant of the share row (used on careers) */
.single-post-share--red .single-post-share__list a {
background: var(--nvs-red);
color: var(--nvs-white);
}
.single-post-share--red .single-post-share__list a:hover { background: var(--nvs-red-dark); }
/* Working for Us — outlined callout */
.single-post-content .working-for-us,
.single-post-content blockquote.is-style-callout,
.single-post-content blockquote {
border: 1px solid var(--nvs-teal);
padding: 1.25rem 1.5rem;
background: transparent;
color: var(--nvs-navy);
font-family: var(--nvs-font-body);
font-size: var(--nvs-p);
line-height: 1.6;
margin: 1.5rem 0;
}
/* Apply Online form */
.single-career__apply-heading {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 24px;
margin: 0 0 1.5rem;
}
.career-apply-form__label {
display: block;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: var(--nvs-navy);
margin: 0 0 .5rem;
}
.career-apply-form__field {
width: 100%;
height: 44px;
padding: 0 1rem;
background: var(--nvs-grey-100);
border: 1px solid var(--nvs-grey-200);
border-radius: 0;
color: var(--nvs-navy);
font-family: var(--nvs-font-body);
font-size: 15px;
outline: none;
}
.career-apply-form__field:focus {
border-color: var(--nvs-teal);
background: var(--nvs-white);
}
.career-apply-form__upload {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
height: 80px;
background: var(--nvs-grey-100);
border: 1px dashed var(--nvs-grey-300);
color: var(--nvs-navy);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.career-apply-form__upload:hover {
border-color: var(--nvs-teal);
background: var(--nvs-white);
}
.career-apply-form__upload .bi { font-size: 18px; color: var(--nvs-teal); }
/* More Careers carousel */
.careers-carousel {
overflow: hidden;
padding-top: 6rem;
padding-bottom: 6rem;
background: var(--nvs-grey-100);
}
.careers-carousel__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.careers-carousel__track::-webkit-scrollbar { display: none; }
.careers-carousel__track { scrollbar-width: none; }
.careers-carousel__card {
flex: 0 0 calc((100% - 3rem) / 3);
min-width: 280px;
scroll-snap-align: start;
border-top: 1px solid var(--nvs-grey-300);
padding: 1.5rem 0 0;
}
.careers-carousel__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
margin: 0 0 .75rem;
line-height: 1.2;
}
.careers-carousel__title a { color: inherit; text-decoration: none; }
.careers-carousel__title a:hover { color: var(--nvs-red); }
.careers-carousel__excerpt {
color: var(--nvs-navy);
font-size: 14px;
margin: 1rem 0 0;
line-height: 1.55;
}
/* -----------------------------------------------------------
* Policies page — left tabs, right active panel
* --------------------------------------------------------- */
.policies-page__nav-heading {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
margin: 0 0 1.5rem;
line-height: 1.2;
}
.policies-page__nav {
list-style: none;
margin: 0;
padding: 0;
}
.policies-page__nav li { margin: 0; }
.policies-page__tab {
display: block;
width: 100%;
background: transparent;
border: 0;
padding: .75rem 0;
font-family: var(--nvs-font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--nvs-navy);
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--nvs-grey-300);
transition: color .15s ease;
}
.policies-page__tab:hover { color: var(--nvs-red); }
.policies-page__tab.is-active { color: var(--nvs-red); }
.policies-page__nav li:last-child .policies-page__tab { border-bottom: 0; }
.policies-page__panel {
display: none;
}
.policies-page__panel.is-active { display: block; }
.policies-page__panel h2,
.policies-page__panel h3 {
color: var(--nvs-navy);
margin-top: 0;
margin-bottom: 1rem;
}
.policies-page__panel h3 { font-size: 22px; margin-top: 2rem; }
.policies-page__panel p { margin-bottom: 1.25rem; }
/* Full-width OpenStreetMap below the form */
.contact-page__map-wrap {
width: 100%;
margin-top: 3rem;
}
.contact-page__map {
width: 100%;
height: 500px;
}
@media (max-width: 767.98px) {
.contact-page__map { height: 360px; }
}
.contact-page__map.leaflet-container { background: var(--nvs-grey-100); }
.nvs-map-pin {
background: transparent;
border: 0;
filter: drop-shadow(0 4px 6px rgba(49,25,74,0.25));
}
/* Step transitions — only the active step is visible */
.contact-form__step {
display: none;
border: 0;
padding: 0;
margin: 0;
}
.contact-form__step.is-active { display: block; }
/* Enquiry-type cards — radio-styled cards with brand-coloured icons */
.contact-form__card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
background: var(--nvs-white);
padding: 2rem 1rem;
min-height: 140px;
cursor: pointer;
text-align: center;
border: 1px solid var(--nvs-grey-300);
transition: border-color .15s ease, box-shadow .15s ease;
margin: 0;
}
.contact-form__card:hover { border-color: var(--nvs-navy); }
.contact-form__card:has(input:checked) {
border-color: var(--nvs-navy);
box-shadow: 0 0 0 2px var(--nvs-navy);
}
.contact-form__icon {
font-size: 28px;
line-height: 1;
}
.contact-form__card--yellow .contact-form__icon { color: var(--nvs-yellow); }
.contact-form__card--teal .contact-form__icon { color: var(--nvs-teal); }
.contact-form__card--red .contact-form__icon { color: var(--nvs-red); }
.contact-form__option-label {
color: var(--nvs-navy);
font-family: var(--nvs-font-heading);
font-size: 17px;
}
/* About Quality wrapper — space above and below the banner */
.about-quality-wrap {
padding: 4rem 0;
}
/* Mission title — slightly smaller than the default h2 */
.about-mission__title {
font-size: 24px;
line-height: 1.2;
}
/* -----------------------------------------------------------
* "Family of Businesses" / Beyond Bricks CTA banner.
* Tall banner with a uniform navy overlay over the background image.
* Content sits at the bottom of the banner.
* --------------------------------------------------------- */
.cta-banner {
position: relative;
overflow: hidden;
min-height: 440px;
display: flex;
align-items: flex-end;
color: var(--nvs-white);
background: var(--nvs-navy);
}
.cta-banner__bg,
.cta-banner__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-banner__bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(49,25,74,0.72);
}
.cta-banner__inner {
position: relative;
z-index: 2;
padding-top: 3rem;
padding-bottom: 4.5rem;
width: 100%;
/* keep Bootstrap container's left/right padding so the copy
doesn't stick to the viewport edges + no horizontal overflow. */
}
.cta-banner__kicker {
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: .75rem;
}
.cta-banner__title {
color: var(--nvs-white);
margin-bottom: 1rem;
font-size: clamp(32px, 3.4vw, 42px);
line-height: 1.1;
}
/* CTA — text + teal chevron circle, no underline on hover */
.cta-banner__cta a {
display: inline-flex;
align-items: center;
gap: 1.25rem;
color: var(--nvs-white);
text-decoration: none;
font-family: var(--nvs-font-heading);
font-size: 18px;
}
@media (max-width: 575.98px) { .cta-banner__cta a { font-size: 16px; } }
.cta-banner__cta a:hover { text-decoration: none; color: var(--nvs-white); }
.cta-banner__chevron {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--nvs-teal);
border: 1.5px solid var(--nvs-teal);
color: var(--nvs-white);
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .2s ease, background-color .15s ease, border-color .15s ease;
}
.cta-banner__cta a:hover .cta-banner__chevron { transform: translateX(4px); }
/* -----------------------------------------------------------
* Hiring CTA band ("Community at Heart")
* --------------------------------------------------------- */
.hiring-cta {
position: relative;
background-color: var(--nvs-blue);
background-image: url("../images/cement-navy.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
color: var(--nvs-white);
padding: 5rem 0;
overflow: hidden;
}
.hiring-cta .container { position: relative; z-index: 1; }
.hiring-cta__kicker {
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.hiring-cta__title {
color: var(--nvs-white);
margin: .5rem 0 0;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.1;
}
.hiring-cta__cta a {
display: inline-flex;
align-items: center;
gap: 1.25rem;
color: var(--nvs-white);
text-decoration: none;
font-family: var(--nvs-font-heading);
font-size: 18px;
}
@media (max-width: 575.98px) { .hiring-cta__cta a { font-size: 16px; } }
.hiring-cta__cta a:hover { text-decoration: none; color: var(--nvs-white); }
.hiring-cta__chevron {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--nvs-teal);
border: 1.5px solid var(--nvs-teal);
color: var(--nvs-white);
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .2s ease, background-color .15s ease, border-color .15s ease;
}
.hiring-cta__cta a:hover .hiring-cta__chevron {
transform: translateX(4px);
background: var(--nvs-red);
border-color: var(--nvs-red);
}
/* -----------------------------------------------------------
* Accreditation logo strip
* --------------------------------------------------------- */
.accred-strip {
padding: 2.5rem 0 5rem;
background: var(--nvs-white);
}
.accred-strip__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 28px;
line-height: 1.15;
margin: 0 0 .75rem;
}
.accred-strip__sub {
font-size: 13px;
color: var(--nvs-grey-600);
margin: 0;
}
/* Logos marquee — full colour. 6 visible on desktop, 4 on mobile.
The list is rendered twice; JS auto-scrolls the track and resets
scrollLeft when it hits 50% of the total width for a seamless loop.
Drag/touch + wheel still work because we use real scrolling. */
.accred-strip__logos {
overflow-x: auto;
overflow-y: hidden;
position: relative;
-webkit-overflow-scrolling: touch;
}
.accred-strip__logos::-webkit-scrollbar { display: none; }
.accred-strip__logos { scrollbar-width: none; }
.accred-strip__track {
display: flex;
align-items: center;
gap: 1.25rem;
width: max-content;
}
/* Mobile default: 4 visible across full width */
.accred-strip__logo {
flex: 0 0 calc((100vw - 4rem) / 4);
max-width: 180px;
max-height: 64px;
height: auto;
width: auto;
object-fit: contain;
}
/* Desktop: 6 visible across the logos column (≈ 66% of the 1350 container) */
@media (min-width: 992px) {
.accred-strip__logo {
flex: 0 0 calc(min(900px, 66.67vw) / 6 - 1.5rem);
max-width: 160px;
}
}
/* Static grid variant — selected logos in a wrapping grid, no marquee. */
.accred-strip--static .accred-strip__grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem 2rem;
}
.accred-strip--static .accred-strip__logo {
flex: 0 0 auto;
width: auto;
max-width: 140px;
max-height: 70px;
height: auto;
object-fit: contain;
}
/* -----------------------------------------------------------
* Section heading kicker + title
* --------------------------------------------------------- */
.section-head { margin-bottom: 2rem; }
.section-head__kicker {
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--nvs-grey-600);
margin: 0 0 .5rem;
}
.section-head__title { margin: 0; color: var(--nvs-navy); }
/* -----------------------------------------------------------
* Carousel
* --------------------------------------------------------- */
.carousel-hero .carousel-img {
object-fit: cover;
width: 100%;
max-height: 70vh;
min-height: 320px;
}
.carousel-hero .carousel-caption {
background: rgba(49, 25, 74, 0.55);
padding: 1.5rem;
border-radius: 4px;
left: 5%;
right: 5%;
bottom: 8%;
}
.carousel-hero .carousel-caption__title {
color: var(--nvs-white);
font-size: var(--nvs-h2);
margin: 0 0 .5rem;
}
.carousel-control-prev,
.carousel-control-next { width: 5%; }
/* -----------------------------------------------------------
* Cards (Projects / Posts)
* --------------------------------------------------------- */
.post-card,
.project-card {
background: var(--nvs-white);
border: 1px solid var(--nvs-grey-300);
transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover,
.project-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(49,25,74,0.08);
}
.post-card__thumb img,
.project-card__thumb img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.post-card__title a,
.project-card__title a {
color: var(--nvs-navy);
text-decoration: none;
}
.post-card__title a:hover,
.project-card__title a:hover { color: var(--nvs-red); }
/* -----------------------------------------------------------
* Testimonials section — projects-style header + 3 cards inside
* the container. Each card has a subtle grid pattern.
* --------------------------------------------------------- */
.testimonials-section {
position: relative;
overflow: hidden;
padding-top: 6rem;
padding-bottom: 3rem;
}
.testimonials-section__nav {
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--nvs-navy);
color: var(--nvs-navy);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.testimonials-section__nav:hover { background: var(--nvs-navy); color: var(--nvs-white); }
/* Track — 3 cards fit inside the container, scrolls horizontally on
narrower screens; no bleed beyond the container. */
.testimonials-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track { scrollbar-width: none; }
/* Card — 1/3 of container width on desktop, fixed min on smaller screens.
Each card has the subtle grid pattern as its own background. */
.testimonial-card {
position: relative;
flex: 0 0 calc((100% - 3rem) / 3);
min-width: 280px;
background-color: var(--nvs-grey-100);
background-image:
linear-gradient(rgba(49,25,74,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(49,25,74,0.05) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--nvs-navy);
padding: 2rem 2.5rem 3rem;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.testimonial-card__quote-mark {
font-family: var(--nvs-font-heading);
font-size: 64px;
line-height: .8;
color: var(--nvs-navy);
display: block;
margin-bottom: 1rem;
}
.testimonial-card__quote {
color: var(--nvs-navy);
font-size: 16px;
line-height: 1.6;
margin: 0 0 1.5rem;
}
.testimonial-card__more {
color: var(--nvs-navy);
text-decoration: underline;
}
.testimonial-card__more:hover { color: var(--nvs-red); }
.testimonial-card__author {
display: flex;
align-items: center;
gap: 1rem;
margin-top: auto;
position: relative;
z-index: 1;
}
.testimonial-card__logo {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
background: var(--nvs-white);
display: inline-flex;
align-items: center;
justify-content: center;
}
.testimonial-card__logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-card__name {
font-family: var(--nvs-font-heading);
font-size: 17px;
color: var(--nvs-navy);
margin: 0;
line-height: 1.2;
}
.testimonial-card__role {
color: var(--nvs-grey-600);
font-size: 13px;
margin: 0;
line-height: 1.4;
}
.testimonial {
max-width: 720px;
font-size: 18px;
line-height: 1.5;
}
.testimonial__quote {
font-family: var(--nvs-font-heading);
font-size: 22px;
margin-bottom: 1rem;
}
.testimonial__author {
font-family: var(--nvs-font-body);
font-weight: 500;
color: var(--nvs-yellow);
}
/* -----------------------------------------------------------
* Careers archive — row-style listings + benefits split.
* --------------------------------------------------------- */
.career-list { border-top: 1px solid var(--nvs-grey-300); }
.career-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 2.5rem 0;
border-bottom: 1px solid var(--nvs-grey-300);
}
.career-row__main { flex: 1; min-width: 0; }
.career-row__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
margin: 0 0 .5rem;
line-height: 1.2;
}
.career-row__title a { color: inherit; text-decoration: none; }
.career-row__title a:hover { color: var(--nvs-red); }
.career-row__excerpt {
color: var(--nvs-navy);
font-size: var(--nvs-p);
margin: 0 0 .75rem;
}
.career-row__meta {
list-style: none;
display: flex;
gap: 1.5rem;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.career-row__meta li {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
color: var(--nvs-navy);
}
.career-row__meta .bi { color: var(--nvs-teal); font-size: 14px; }
.career-row__action { flex-shrink: 0; }
@media (max-width: 575.98px) {
.career-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
.career-row__action { width: 100%; }
.career-row__action .btn { width: 100%; }
}
/* Pagination — outlined circles with chevron, separator dots */
.career-pagination {
gap: .25rem;
align-items: center;
}
.career-pagination .page-numbers {
min-width: 40px;
padding: .25rem .65rem;
background: transparent;
border: 0;
color: var(--nvs-navy);
font-family: var(--nvs-font-heading);
font-size: 16px;
border-bottom: 3px solid transparent;
}
.career-pagination .page-numbers.current { border-bottom-color: var(--nvs-red); background: transparent; color: var(--nvs-navy); }
.career-pagination .page-numbers:hover { background: transparent; border-bottom-color: var(--nvs-navy); color: var(--nvs-navy); }
.career-pagination__nav {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--nvs-navy);
color: var(--nvs-navy);
align-items: center;
justify-content: center;
transition: background-color .15s ease, color .15s ease;
}
.career-pagination .page-numbers:hover .career-pagination__nav {
background: var(--nvs-navy);
color: var(--nvs-white);
}
/* -----------------------------------------------------------
* Posts / projects pagination — chevron circles either side of
* the numbered pages, each page underlined in a cycling brand
* accent (red → yellow → teal). Shares the circle-nav look with
* the careers pagination above.
* --------------------------------------------------------- */
.nvs-pagination { margin-top: 3rem; }
.nvs-pagination__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .5rem;
}
.nvs-pagination .page-numbers {
min-width: 40px;
padding: .25rem .65rem;
text-align: center;
background: transparent;
border: 0;
color: #9aa4b2; /* muted grey for inactive pages */
font-family: var(--nvs-font-heading);
font-size: 16px;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: color .15s ease;
}
.nvs-pagination .page-numbers.current { color: var(--nvs-navy); font-weight: 700; }
.nvs-pagination a.page-numbers:hover { color: var(--nvs-navy); }
/* Cycling accent underlines on the numbered pages */
.nvs-pagination__num--red { border-bottom-color: var(--nvs-red); }
.nvs-pagination__num--yellow { border-bottom-color: var(--nvs-yellow); }
.nvs-pagination__num--teal { border-bottom-color: var(--nvs-teal); }
/* Prev / next outlined chevron circles */
.nvs-pagination .page-numbers.prev,
.nvs-pagination .page-numbers.next {
min-width: 0;
padding: 0;
border-bottom: 0;
}
.nvs-pagination .page-numbers.prev { margin-right: .75rem; }
.nvs-pagination .page-numbers.next { margin-left: .75rem; }
.nvs-pagination__nav {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--nvs-navy);
color: var(--nvs-navy);
align-items: center;
justify-content: center;
transition: background-color .15s ease, color .15s ease;
}
.nvs-pagination .page-numbers:hover .nvs-pagination__nav {
background: var(--nvs-navy);
color: var(--nvs-white);
}
/* Benefits section */
.careers-benefits { padding-top: 4rem; padding-bottom: 6rem; }
@media (min-width: 992px) {
/* Wider gap between the two cols on desktop than Bootstrap's g-5 allows */
.careers-benefits .row { --bs-gutter-x: 6rem; }
}
.careers-benefits__heading {
color: var(--nvs-navy);
font-size: 26px;
line-height: 1.25;
margin: .25rem 0 1.5rem;
}
.careers-benefits__badge {
display: block;
width: 140px;
height: auto;
max-width: 100%;
}
.careers-benefits__items > * + * { margin-top: 1.75rem; }
.careers-benefits__item h3 {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 22px;
margin: 0 0 .5rem;
}
.careers-benefits__item p {
color: var(--nvs-navy);
font-size: 14px;
margin: 0;
line-height: 1.55;
}
/* -----------------------------------------------------------
* Footer
* --------------------------------------------------------- */
.site-footer {
background: var(--nvs-navy);
color: var(--nvs-white);
margin-top: 0;
}
.site-footer a { color: var(--nvs-white); text-decoration: none; }
.site-footer a:hover { color: var(--nvs-yellow); }
.site-footer .btn:hover,
.site-footer .btn-red:hover { color: var(--nvs-white); }
.site-footer__heading {
color: rgba(255,255,255,0.55);
font-family: var(--nvs-font-body);
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.site-footer__col ul li { margin-bottom: .65rem; font-size: 15px; }
.site-footer__logo { color: var(--nvs-white); text-decoration: none; }
.site-footer__logo .custom-logo,
.site-footer__logo-img {
width: 230px;
max-width: 100%;
height: auto;
display: block;
}
.site-footer__tag {
font-family: var(--nvs-font-heading);
font-size: 22px;
color: var(--nvs-white);
line-height: 1.2;
margin-top: 1rem;
}
.site-footer__social-link {
display: inline-flex;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--nvs-teal);
color: var(--nvs-white) !important;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background-color .15s ease, border-color .15s ease;
}
.site-footer__social-link:hover {
background: var(--nvs-teal);
border-color: var(--nvs-teal);
}
.site-footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1);
}
.site-footer__legal .list-inline > li { margin-right: 2rem; font-size: 14px; }
.site-footer__legal .list-inline > li:last-child { margin-right: 0; }
.site-footer__credit { color: rgba(255,255,255,0.5); font-size: 12px; }
/* -----------------------------------------------------------
* Pagination
* --------------------------------------------------------- */
.pagination .page-numbers {
display: inline-block;
padding: .5rem .9rem;
margin: 0 .15rem;
background: var(--nvs-white);
border: 1px solid var(--nvs-grey-300);
color: var(--nvs-navy);
text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: var(--nvs-red);
color: var(--nvs-white);
border-color: var(--nvs-red);
}
/* -----------------------------------------------------------
* Forms
* --------------------------------------------------------- */
.form-control:focus {
border-color: var(--nvs-teal);
box-shadow: 0 0 0 0.2rem rgba(101,156,187,0.25);
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--nvs-navy);
color: var(--nvs-white);
padding: 8px;
z-index: 2000;
}
.skip-link:focus { top: 0; }
/* -----------------------------------------------------------
* Contact modal — sitewide popup opened by "Contact Us" links.
* Slides up from the bottom on mobile; fades + rises on desktop.
* Backdrop is 80% dark purple; close button is a dark-purple circle
* with a white X.
* --------------------------------------------------------- */
.nvs-contact-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
}
.nvs-contact-modal.is-open { display: block; }
body.nvs-contact-open { overflow: hidden; }
.nvs-contact-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(49, 25, 74, 0.8);
opacity: 0;
animation: nvs-contact-backdrop-in .3s ease forwards;
}
@keyframes nvs-contact-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.nvs-contact-modal__dialog {
position: absolute;
background: var(--nvs-white);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Only the body scrolls — the close button lives on the dialog and
stays pinned to the top-right corner regardless of scroll position. */
.nvs-contact-modal__body {
padding: 3rem 2rem 2.5rem;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
min-height: 0;
}
/* Mobile: full-width sheet sliding up from the bottom */
@media (max-width: 767.98px) {
.nvs-contact-modal__dialog {
left: 0;
right: 0;
bottom: 0;
max-height: 92vh;
border-radius: 12px 12px 0 0;
transform: translateY(100%);
animation: nvs-contact-sheet-in .45s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes nvs-contact-sheet-in {
to { transform: translateY(0); }
}
}
/* Desktop: centered rounded card that fades + rises */
@media (min-width: 768px) {
.nvs-contact-modal__dialog {
top: 50%;
left: 50%;
width: min(880px, calc(100% - 2rem));
max-height: 90vh;
border-radius: 12px;
transform: translate(-50%, calc(-50% + 20px));
opacity: 0;
animation: nvs-contact-card-in .4s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes nvs-contact-card-in {
to { opacity: 1; transform: translate(-50%, -50%); }
}
}
.nvs-contact-modal__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--nvs-navy);
color: var(--nvs-white);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
transition: background-color .15s ease;
}
.nvs-contact-modal__close:hover,
.nvs-contact-modal__close:focus-visible {
background: var(--nvs-red);
outline: none;
}
.nvs-contact-modal__title {
font-family: var(--nvs-font-heading);
font-size: clamp( 28px, 3vw, 40px );
line-height: 1.15;
padding-bottom: .15em;
margin: 0 0 1rem;
background: linear-gradient(135deg, var(--nvs-navy) 0%, var(--nvs-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.nvs-contact-modal__email {
color: var(--nvs-navy);
font-family: var(--nvs-font-body);
font-size: 15px;
line-height: 1.5;
margin: 0 0 1.5rem;
}
.nvs-contact-modal__email a {
color: var(--nvs-navy);
text-decoration: none;
font-weight: 500;
}
.nvs-contact-modal__email a:hover { color: var(--nvs-red); }
.nvs-contact-modal__label {
font-family: inherit;
font-size: inherit;
font-weight: 600;
margin-right: .35rem;
opacity: 1;
}
.nvs-contact-modal__linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--nvs-navy);
color: var(--nvs-white);
text-decoration: none;
transition: background-color .15s ease;
}
.nvs-contact-modal__linkedin:hover,
.nvs-contact-modal__linkedin:focus-visible {
background: var(--nvs-red);
color: var(--nvs-white);
outline: none;
}
.nvs-contact-modal__linkedin .bi { font-size: 20px; line-height: 1; }
@media (min-width: 768px) {
.nvs-contact-modal__aside { padding-right: 1.5rem; }
}
.nvs-contact-modal__form input,
.nvs-contact-modal__form select,
.nvs-contact-modal__form textarea { max-width: 100%; }
/* Formidable form fields — normalise labels, inputs, textareas so the
form reads as native Novosound copy (same font, colour, sizing). */
.frm_forms,
.with_frm_style,
.nvs-contact-modal__form {
font-family: var(--nvs-font-body);
color: var(--nvs-navy);
}
.frm_forms .frm_form_field label,
.frm_forms .frm_primary_label,
.with_frm_style .frm_form_field label,
.with_frm_style .frm_primary_label {
font-family: var(--nvs-font-heading);
font-size: 14px;
font-weight: 600;
color: var(--nvs-navy);
margin: 0 0 .35rem;
display: block;
text-transform: none;
letter-spacing: 0;
line-height: 1.4;
}
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms input[type="url"],
.frm_forms input[type="number"],
.frm_forms input[type="search"],
.frm_forms input[type="password"],
.frm_forms select,
.frm_forms textarea,
.with_frm_style input[type="text"],
.with_frm_style input[type="email"],
.with_frm_style input[type="tel"],
.with_frm_style input[type="url"],
.with_frm_style input[type="number"],
.with_frm_style input[type="search"],
.with_frm_style input[type="password"],
.with_frm_style select,
.with_frm_style textarea {
font-family: var(--nvs-font-body);
font-size: 15px;
color: var(--nvs-navy);
background: var(--nvs-white);
border: 1px solid var(--nvs-grey-300);
border-radius: 8px;
padding: .75rem 1rem;
width: 100%;
max-width: 100%;
line-height: 1.4;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.frm_forms input[type="text"]:focus,
.frm_forms input[type="email"]:focus,
.frm_forms input[type="tel"]:focus,
.frm_forms input[type="url"]:focus,
.frm_forms select:focus,
.frm_forms textarea:focus,
.with_frm_style input[type="text"]:focus,
.with_frm_style input[type="email"]:focus,
.with_frm_style input[type="tel"]:focus,
.with_frm_style input[type="url"]:focus,
.with_frm_style select:focus,
.with_frm_style textarea:focus {
border-color: var(--nvs-navy);
outline: none;
box-shadow: 0 0 0 3px rgba(112, 38, 165, .15);
}
.frm_forms textarea,
.with_frm_style textarea { min-height: 120px; resize: vertical; }
.frm_forms .frm_form_field,
.with_frm_style .frm_form_field { margin-bottom: 1.25rem; }
.frm_forms .frm_description,
.with_frm_style .frm_description {
font-size: 13px;
color: var(--nvs-grey-600);
margin-top: .35rem;
font-family: var(--nvs-font-body);
}
.frm_forms .frm_required { color: var(--nvs-red); }
/* -----------------------------------------------------------
* Video modal — flex-centered dialog so it renders reliably on
* every browser (including older mobile Safari).
* --------------------------------------------------------- */
.nvs-video-modal {
position: fixed;
inset: 0;
z-index: 2100;
display: none;
align-items: center;
justify-content: center;
padding: 4rem 1rem 1rem;
}
.nvs-video-modal.is-open { display: flex; }
.nvs-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(49, 25, 74, 0.85);
z-index: 1;
}
.nvs-video-modal__dialog {
position: relative;
z-index: 2;
width: 100%;
max-width: 960px;
}
.nvs-video-modal__frame {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
background: #000;
border-radius: 16px;
overflow: hidden;
}
.nvs-video-modal__frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.nvs-video-modal__close {
position: absolute;
top: -3rem;
right: 0;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--nvs-navy);
color: var(--nvs-white);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
transition: background-color .15s ease;
}
.nvs-video-modal__close:hover,
.nvs-video-modal__close:focus-visible {
background: var(--nvs-red);
outline: none;
}
/* Formidable submit buttons — sitewide, styled to match the Contact Us
pill button (dark purple → purple on hover). */
.frm_forms .frm_submit .btn,
.frm_forms .frm_submit input[type="submit"],
.frm_forms .frm_submit button,
.with_frm_style .frm_submit .btn,
.with_frm_style .frm_submit input[type="submit"],
.with_frm_style .frm_submit button {
background: var(--nvs-navy);
color: var(--nvs-white);
border: 1px solid var(--nvs-navy);
border-radius: 999px;
padding: 1.1rem 2.1rem;
font-family: var(--nvs-font-heading);
font-weight: 600;
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
text-shadow: none;
}
.frm_forms .frm_submit .btn:hover,
.frm_forms .frm_submit input[type="submit"]:hover,
.frm_forms .frm_submit button:hover,
.with_frm_style .frm_submit .btn:hover,
.with_frm_style .frm_submit input[type="submit"]:hover,
.with_frm_style .frm_submit button:hover {
background: var(--nvs-red);
border-color: var(--nvs-red);
color: var(--nvs-white);
}
/* -----------------------------------------------------------
* Novosound home page — sections beneath the hero.
* --------------------------------------------------------- */
/* Emphasise the second heading word in dark-purple → purple pairs so we
can offer a subtle two-tone heading (matches the PDF's accent pop). */
.home-challenge__title,
.home-smarter__title,
.home-scaling__title,
.home-partner__title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
line-height: 1.15;
margin: 0;
}
.home-challenge__title {
font-size: clamp( 28px, 3vw, 42px );
line-height: 1.2;
padding-bottom: .15em;
background: linear-gradient(135deg, var(--nvs-navy) 0%, var(--nvs-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.home-smarter__title {
font-size: clamp( 26px, 2.6vw, 36px );
line-height: 1.2;
padding-bottom: .15em;
background: linear-gradient(135deg, var(--nvs-navy) 0%, var(--nvs-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.home-scaling__title {
font-size: clamp( 28px, 3vw, 42px );
line-height: 1.2;
padding-bottom: .15em;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--nvs-navy) 0%, var(--nvs-red) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}
/* The Numbers Behind the Challenge */
.home-challenge__body p { color: var(--nvs-navy); font-size: 15px; line-height: 1.7; margin-bottom: 1rem; }
.home-challenge__body p:last-child { margin-bottom: 0; }
.home-challenge__stats { padding-top: 1.5rem; }
.home-challenge__stat-label {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 14px;
font-weight: 500;
margin: 0 0 .75rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(49, 25, 74, 0.2);
}
.home-challenge__stat-num {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: clamp( 24px, 2.4vw, 34px );
font-weight: 700;
margin: 0 0 .5rem;
line-height: 1.1;
}
.home-challenge__stat-desc {
color: var(--nvs-navy);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* A Smarter Way to Measure — rounded box, contained within the site
container. Uses the same radial-glow style as the banner but flipped
vertically, with a light-purple base showing through more than white. */
.home-smarter {
background:
radial-gradient(ellipse 65% 60% at 62% 28%, rgba(112, 38, 165, 0.22) 0%, rgba(112, 38, 165, 0) 70%),
radial-gradient(ellipse 40% 45% at 88% 10%, rgba(112, 38, 165, 0.18) 0%, rgba(112, 38, 165, 0) 65%),
radial-gradient(ellipse 35% 45% at 5% 0%, rgba(112, 38, 165, 0.18) 0%, rgba(112, 38, 165, 0) 65%),
radial-gradient(ellipse 55% 50% at 85% 80%, rgba(112, 38, 165, 0.08) 0%, rgba(112, 38, 165, 0) 60%),
rgba(112, 38, 165, 0.06);
border-radius: 24px;
max-width: 1350px;
margin: 5rem auto;
padding: 5rem 1.5rem;
}
@media (max-width: 575.98px) {
.home-smarter { border-radius: 16px; margin: 3rem .5rem; padding: 3rem 1rem; }
}
.home-smarter__card {
background: transparent;
display: flex;
flex-direction: column;
}
.home-smarter__illustration {
background: var(--nvs-white);
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.home-smarter__illustration-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-smarter__card-title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 20px;
font-weight: 700;
margin: 0 0 1rem;
}
.home-smarter__card-body {
color: var(--nvs-navy);
font-size: 14px;
line-height: 1.65;
margin: 0 0 .85rem;
}
.home-smarter__card-body:last-child { margin-bottom: 0; }
/* Scaling the Future of Health Monitoring */
.home-scaling__chart-title {
font-family: var(--nvs-font-heading);
color: var(--nvs-navy);
font-size: 13px;
margin: 0 0 1rem;
}
/* Chart wrapper — sizes itself to the uploaded SVG. Placeholder aspect
ratio only kicks in when the wrapper is empty. */
.home-scaling__chart {
position: relative;
width: 100%;
}
.home-scaling__chart:empty {
aspect-ratio: 3 / 2;
background: var(--nvs-grey-100);
border-radius: 12px;
}
.home-scaling__chart-img {
width: 100%;
height: auto;
display: block;
}
.home-scaling__copy p { color: var(--nvs-navy); font-size: 15px; line-height: 1.7; margin-bottom: 1rem; }
.home-scaling__list {
list-style: none;
padding: 0;
margin: 0 0 1rem;
color: var(--nvs-navy);
font-size: 15px;
line-height: 1.7;
}
.home-scaling__list li { padding-left: 1.25rem; position: relative; }
.home-scaling__list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--nvs-red);
font-weight: 700;
}
/* Partner CTA — dark-purple rounded box with the same radial-glow style
as the Smarter section, but with dark purple as the base and the purple
accent as the radial highlights. */
.home-partner__box {
background:
radial-gradient(ellipse 65% 60% at 62% 28%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(ellipse 40% 45% at 88% 10%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 65%),
radial-gradient(ellipse 35% 45% at 5% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 65%),
radial-gradient(ellipse 55% 50% at 85% 80%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
var(--nvs-red);
color: var(--nvs-white);
border-radius: 24px;
padding: 6rem 2rem;
}
.home-partner { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 575.98px) {
.home-partner__box { padding: 4rem 1.5rem; }
.home-partner { padding-top: 2rem; padding-bottom: 2rem; }
}
.home-partner__title {
color: var(--nvs-white);
font-size: clamp( 28px, 3.2vw, 42px );
line-height: 1.15;
margin: 0 0 2rem;
}
.home-partner__cta { margin: 0; }
/* Novosound simple footer */
.site-footer--novosound {
background: var(--nvs-white);
color: var(--nvs-navy);
border-top: 1px solid var(--nvs-grey-200);
padding: 2rem 0 1.5rem;
}
.site-footer--novosound a { color: var(--nvs-navy); }
.site-footer--novosound a:hover { color: var(--nvs-red); }
.site-footer--novosound__logo img { max-height: 64px; width: auto; display: block; }
.site-footer--novosound .btn-navy,
.site-footer--novosound .btn-navy:hover,
.site-footer--novosound .btn-navy:focus { color: var(--nvs-white); }
.site-footer--novosound__label {
font-family: var(--nvs-font-heading);
font-size: 13px;
font-weight: 600;
margin: 0;
color: var(--nvs-navy);
opacity: .7;
}
.site-footer--novosound__email { font-size: 15px; margin: .25rem 0 0; }
.site-footer--novosound__copy {
color: var(--nvs-navy);
opacity: .7;
font-size: 13px;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--nvs-grey-200);
line-height: 1.6;
margin-bottom: .5rem;
}
.site-footer--novosound__credit {
color: var(--nvs-navy);
opacity: .6;
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.site-footer--novosound__credit a {
color: var(--nvs-navy);
text-decoration: none;
font-weight: 600;
}
.site-footer--novosound__credit a:hover { color: var(--nvs-red); }