/**
* McTaggart Theme — main stylesheet
*
* Layered on top of Bootstrap 5.3. Uses CSS custom properties for the
* brand palette and typography scale.
*/
/* -----------------------------------------------------------
* Brand variables
* --------------------------------------------------------- */
:root {
--mct-navy: #001E43;
--mct-blue: #19305A;
--mct-red: #CF333B;
--mct-red-dark: #761113;
--mct-yellow: #F5AF3D;
--mct-teal: #659CBB;
--mct-white: #FFFFFF;
--mct-black: #111111;
--mct-grey-100: #F5F6F8;
--mct-grey-200: #ECEEF2;
--mct-grey-300: #D7DAE0;
--mct-grey-600: #6c757d;
--mct-font-heading: "Aptos Slab", "Roboto Slab", Georgia, serif;
--mct-font-body: "Aktiv Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
--mct-h1: 45px;
--mct-h2: 30px;
--mct-h3: 26px;
--mct-p: 16px;
--mct-header-height: 80px;
--bs-primary: var(--mct-navy);
--bs-secondary: var(--mct-red);
--bs-body-font-family: var(--mct-font-body);
--bs-body-font-size: var(--mct-p);
--bs-body-color: var(--mct-navy);
--bs-link-color: var(--mct-red);
--bs-link-hover-color: var(--mct-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
* --------------------------------------------------------- */
body {
font-family: var(--mct-font-body);
font-weight: 400;
font-size: var(--mct-p);
color: var(--mct-navy);
line-height: 1.55;
}
p, li {
font-family: var(--mct-font-body);
font-weight: 400;
font-size: var(--mct-p);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--mct-font-heading);
font-weight: 500;
color: var(--mct-navy);
line-height: 1.15;
letter-spacing: -0.005em;
}
h1, .h1 { font-size: var(--mct-h1); }
h2, .h2 { font-size: var(--mct-h2); }
h3, .h3 { font-size: var(--mct-h3); }
h4, .h4 { font-size: 22px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }
a { color: var(--mct-red); text-decoration: none; }
a:hover { color: var(--mct-red-dark); text-decoration: underline; }
@media (max-width: 767.98px) {
:root {
--mct-h1: 30px;
--mct-h2: 28px;
--mct-h3: 24px;
--mct-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 — square corners, heading font, brand colours
* --------------------------------------------------------- */
.btn {
font-family: var(--mct-font-heading);
font-weight: 600;
font-size: 15px;
border-radius: 0;
padding: .85rem 1.5rem;
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(--mct-navy);
color: var(--mct-white);
border: 1px solid var(--mct-navy);
}
.btn-navy:hover { background: var(--mct-blue); color: var(--mct-white); border-color: var(--mct-blue); }
.btn-red {
background: var(--mct-red);
color: var(--mct-white);
border: 1px solid var(--mct-red);
}
.btn-red:hover { background: var(--mct-red-dark); color: var(--mct-white); border-color: var(--mct-red-dark); }
.btn-red:focus { color: var(--mct-white); box-shadow: 0 0 0 .2rem rgba(207,51,59,.3); }
.btn-yellow {
background: var(--mct-yellow);
color: var(--mct-navy);
border: 1px solid var(--mct-yellow);
}
.btn-yellow:hover { filter: brightness(0.95); }
.btn-teal {
background: var(--mct-teal);
color: var(--mct-white);
border: 1px solid var(--mct-teal);
}
.btn-outline-white {
background: transparent;
color: var(--mct-white);
border: 1px solid var(--mct-white);
}
.btn-outline-white:hover { background: var(--mct-white); color: var(--mct-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(--mct-white);
color: var(--mct-red);
flex-shrink: 0;
font-size: 16px;
transition: transform .2s ease;
}
.btn-circle-arrow--red { background: var(--mct-red); color: var(--mct-white); }
.btn-circle-arrow--navy { background: var(--mct-navy); color: var(--mct-white); }
.btn-circle-arrow--white { background: var(--mct-white); color: var(--mct-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(--mct-font-heading);
font-weight: 600;
font-size: 16px;
color: var(--mct-navy);
text-decoration: none;
}
.arrow-link:hover { color: var(--mct-red); text-decoration: none; }
.arrow-link__icon {
display: inline-flex;
width: 44px;
height: 44px;
background: var(--mct-navy);
color: var(--mct-white);
align-items: center;
justify-content: center;
}
.arrow-link:hover .arrow-link__icon { background: var(--mct-red); }
/* -----------------------------------------------------------
* Backgrounds & text utility colours
* --------------------------------------------------------- */
.bg-navy { background-color: var(--mct-navy) !important; }
.bg-blue { background-color: var(--mct-blue) !important; }
.bg-red { background-color: var(--mct-red) !important; }
.bg-yellow { background-color: var(--mct-yellow) !important; }
.bg-teal { background-color: var(--mct-teal) !important; }
.bg-light { background-color: var(--mct-grey-100) !important; }
.text-navy { color: var(--mct-navy) !important; }
.text-red { color: var(--mct-red) !important; }
.text-yellow { color: var(--mct-yellow) !important; }
.text-teal { color: var(--mct-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(--mct-white);
}
/* Coloured accent underline (used under stats, services, page hero) */
.accent {
display: block;
width: 60px;
height: 4px;
margin-top: .75rem;
background: var(--mct-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(--mct-red); }
.accent--yellow { background: var(--mct-yellow); }
.accent--teal { background: var(--mct-teal); }
.accent--navy { background: var(--mct-navy); }
.accent--white { background: var(--mct-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(--mct-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(--mct-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(--mct-navy);
position: sticky;
top: 0;
}
.site-header__logo .custom-logo,
.site-header__logo-img {
max-height: 80px;
width: auto;
display: block;
}
.site-header__logo .site-title {
font-family: var(--mct-font-heading);
font-size: 22px;
color: var(--mct-white);
}
.site-header__logo a { color: var(--mct-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(--mct-font-body);
font-weight: 500;
font-size: 15px;
color: var(--mct-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(--mct-white);
border-bottom-color: var(--mct-red);
}
/* Dropdowns (e.g. "Our Companies") inside main menu */
.site-header__nav .dropdown-menu {
background: var(--mct-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(--mct-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(--mct-blue);
color: var(--mct-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(--mct-white);
font-size: 20px;
padding: .25rem .5rem;
text-decoration: none;
}
.site-header__actions .btn-link:hover { color: var(--mct-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(--mct-blue);
color: var(--mct-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(--mct-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(--mct-navy);
color: var(--mct-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(--mct-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(--mct-blue), var(--mct-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(--mct-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(--mct-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: 2;
column-gap: 2rem;
}
.mega-panel__menu li {
margin-bottom: 1rem;
break-inside: avoid;
}
.mega-panel__menu a {
color: var(--mct-white);
font-family: var(--mct-font-body);
font-weight: 500;
font-size: 17px;
text-decoration: none;
}
.mega-panel__menu a:hover { color: var(--mct-yellow); }
.mega-panel__address,
.mega-panel__phone a,
.mega-panel__email a {
color: var(--mct-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(--mct-teal);
font-size: 14px;
}
.mega-panel__phone a:hover,
.mega-panel__email a:hover { color: var(--mct-yellow); }
/* Get In Touch — one block per contact location (name + phone + address). */
.mega-panel__location-name {
color: var(--mct-white);
font-weight: 600;
font-size: 17px;
margin: 0 0 .85rem;
}
.mega-panel__address-line {
display: flex;
align-items: flex-start;
gap: .75rem;
color: var(--mct-white);
font-size: 15px;
line-height: 1.6;
}
.mega-panel__address-line .mega-panel__icon { margin-top: 3px; }
.mega-panel__social-link {
display: inline-flex;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--mct-teal);
color: var(--mct-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(--mct-teal); color: var(--mct-white); }
.mega-panel__col--brands {
background: var(--mct-blue);
background-image: linear-gradient(135deg, var(--mct-blue), var(--mct-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(--mct-navy);
color: var(--mct-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(--mct-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(--mct-white);
font-family: var(--mct-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(--mct-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(--mct-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(--mct-white);
font-size: 20px;
transition: background-color .15s ease, border-color .15s ease;
}
.mega-panel__brand a:hover .mega-panel__brand-arrow {
background: var(--mct-white);
color: var(--mct-navy);
border-color: var(--mct-white);
}
.mega-panel__brand-text { display: block; flex: 1; }
.mega-panel__brand-title {
display: block;
font-family: var(--mct-font-heading);
font-size: 18px;
color: var(--mct-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(--mct-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;
background: var(--mct-navy);
color: var(--mct-white);
overflow: hidden;
min-height: 480px;
}
/* Subtle line-grid overlay — same as home hero, masked to fade out */
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 32px 32px;
z-index: 1;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.page-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 480px;
align-items: stretch;
}
@media (max-width: 767.98px) {
.page-hero__inner { grid-template-columns: 1fr; min-height: 0; }
}
.page-hero__copy {
padding-top: calc(var(--mct-header-height) + 4rem);
padding-bottom: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.page-hero__copy .container { padding-right: 2rem; padding-left: max(1rem, calc((100vw - 1350px) / 2 + 1rem)); }
.page-hero__title { color: var(--mct-white); margin-bottom: 1rem; }
.page-hero__lead { color: rgba(255,255,255,0.85); max-width: 540px; }
.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(--mct-yellow); }
.page-hero__cta {
position: absolute;
/* Align the button's right edge to the container's right edge (1350px cap)
on wide screens, falling back to a 2rem gutter on smaller ones. */
right: max(2rem, calc((100vw - 1350px) / 2 + 0.75rem));
bottom: 2rem;
z-index: 2;
}
.page-hero__media {
position: relative;
min-height: 480px;
overflow: hidden;
}
.page-hero__media img {
/* Absolutely fill the media column so the image COVERS the hero rather
than dictating its height by its own aspect ratio. Without this the
banner height varied per image, and the masked variant (image taken
out of flow) collapsed shorter than the non-masked ones. */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Navy gradient on the left edge of the image, fading right —
same family as the home-hero overlay so the image reads as a
continuation of the navy hero. */
.page-hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,30,67,0.55) 0%, rgba(0,30,67,0) 40%),
linear-gradient(180deg, rgba(0,30,67,0.5) 0%, rgba(0,30,67,0) 30%, rgba(0,30,67,0) 70%, rgba(0,30,67,0.55) 100%);
pointer-events: none;
}
/* Strong navy gradient across the WHOLE hero — solid navy under the
site header, fading to transparent further down so it reads as a
continuation of the navy band whatever image sits behind. */
.page-hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(180deg, rgba(0,30,67,0.95) 0%, rgba(0,30,67,0.85) 20%, rgba(0,30,67,0.55) 45%, rgba(0,30,67,0.2) 75%, rgba(0,30,67,0) 100%);
z-index: 1;
pointer-events: none;
}
@media (max-width: 991.98px) {
.page-hero,
.page-hero__media,
.page-hero__inner { min-height: 0; }
.page-hero__inner { grid-template-columns: 1fr; }
.page-hero__media { display: none; }
.page-hero__copy { padding-top: calc(var(--mct-header-height) + 4rem); padding-bottom: 2.5rem; }
}
/* -----------------------------------------------------------
* Masked archive hero ("Apply McTaggart Mask")
* The hero image is clipped to the McTaggart vector shape and sits
* behind the hero copy. The image layer is anchored to the right and
* allowed to bleed off-canvas (clipped by .page-hero's overflow:hidden).
* The existing .page-hero__media gradient keeps the header legible.
* --------------------------------------------------------- */
.page-hero--masked .page-hero__copy {
position: relative;
z-index: 2; /* keep copy above the masked image */
}
.page-hero--masked .page-hero__media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 55%;
min-height: 0;
z-index: 0; /* behind the hero copy */
}
.page-hero--masked .page-hero__media img {
/* "contain" keeps the whole vector shape visible (with navy showing
around/between the petals), anchored to the right. Scale the shape
with the height value below (e.g. 90vw–110vw) to taste. */
-webkit-mask: url(../images/mctaggart-vector-mask.svg) no-repeat 10vw -20vw;
mask: url(../images/mctaggart-vector-mask.svg) no-repeat 10vw -20vw;
-webkit-mask-size: auto 90vw;
mask-size: auto 90vw;
}
@media (max-width: 991.98px) {
/* Mask/image hidden on small screens, same as the default hero. */
.page-hero--masked .page-hero__media { display: none; }
}
.page-hero__cta-wrap {
position: relative;
}
/* -----------------------------------------------------------
* Home hero — full-bleed image with overlay caption
* --------------------------------------------------------- */
.home-hero {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: flex-end;
color: var(--mct-white);
background: var(--mct-navy);
padding-top: var(--mct-header-height);
}
.home-hero__bg,
.home-hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navy gradients: solid at top, fades by ~50%; stronger floor at bottom for legibility */
.home-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, var(--mct-navy) 0%, rgba(0,30,67,.7) 25%, rgba(0,30,67,0) 55%),
linear-gradient(0deg, rgba(0,30,67,.92) 0%, rgba(0,30,67,.65) 25%, rgba(0,30,67,0) 55%);
}
/* Subtle line-grid overlay across the hero — fades with the top/bottom gradients */
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 32px 32px;
z-index: 1;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 60%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 60%, transparent 100%);
}
.home-hero__inner {
position: relative;
z-index: 2;
padding-top: calc(var(--mct-header-height) + 4rem);
padding-bottom: 6rem;
width: 100%;
}
/* Optional badge above the hero text (e.g. anniversary mark). Only renders
when an image is set. */
.home-hero__badge {
margin-bottom: 50px;
}
.home-hero__badge-img {
display: block;
width: 160px;
height: auto;
max-width: 200px;
height:auto;
}
@media only screen and (max-width: 575.98px) {
.home-hero__badge-img { width: 130px; }
}
.home-hero__kicker {
font-size: 13px;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: 1rem;
}
.home-hero__title {
color: var(--mct-white);
font-size: clamp(40px, 4vw, 56px);
line-height: 1.1;
margin-bottom: 1.25rem;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.home-hero__title { white-space: normal; font-size: 36px; }
}
.home-hero__sub { color: rgba(255,255,255,0.9); max-width: 540px; font-size: var(--mct-p); }
/* Scroll-down indicator (light circle with down arrow), bottom-centre */
.home-hero__scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
text-decoration: none;
}
.home-hero__scroll-icon {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
color: var(--mct-white);
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255,255,255,0.6);
transition: background-color .2s ease, transform .2s ease;
}
.home-hero__scroll:hover .home-hero__scroll-icon {
background: rgba(255,255,255,0.2);
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(--mct-font-heading);
font-size: clamp(40px, 4vw, 60px);
color: var(--mct-navy);
display: block;
margin-bottom: .25rem;
line-height: 1;
}
.stat-block__label {
color: var(--mct-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: 5rem !important; }
/* Less space above the section on mobile. */
@media (max-width: 991.98px) {
.who-are-we { padding-top: 2rem !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: stretch; }
.who-are-we__col-right {
display: flex;
flex-direction: column;
}
.who-are-we__body { max-width: 42ch; }
/* 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(--mct-white);
}
.who-are-we__image-cta {
display: block;
margin: 0;
}
/* -----------------------------------------------------------
* Home quote — large slab heading + body paragraph split
* --------------------------------------------------------- */
.home-quote { padding-top: 3rem; padding-bottom: 3rem; }
.home-quote__title {
font-size: clamp(28px, 3vw, 38px);
line-height: 1.15;
color: var(--mct-navy);
}
.home-quote__body { color: var(--mct-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(--mct-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); }
.video-thumb { cursor: pointer; }
/* Elementor-style autoplay YouTube background video (home "Who Are We").
* The iframe is forced to 16:9, sized to cover the 16:10 box and scaled up
* so YouTube's title/branding sits outside the crop. An overlay swallows
* clicks so the player UI never appears. */
.video-bg {
position: relative;
overflow: hidden;
background: var(--mct-navy);
/* Full column width. On mobile the ratio (≈640x422) keeps the same
landscape shape as desktop; desktop pins the height to 442px below.
The left column is display:flex, so don't stretch to the right column. */
width: 100%;
aspect-ratio: 640 / 422;
flex: 0 0 auto;
align-self: flex-start;
}
@media (min-width: 992px) {
.video-bg {
aspect-ratio: auto;
height: 442px;
}
}
.video-bg__poster {
position: absolute;
inset: 0;
z-index: 0;
}
.video-bg__poster img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-bg__frame {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.video-bg__frame iframe {
position: absolute;
top: 50%;
left: 50%;
/* Keep the iframe a true 16:9 (so YouTube doesn't letterbox), then grow it
to cover the box via min-width/min-height. scale() crops in further. */
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
aspect-ratio: 16 / 9;
border: 0;
transform: translate(-50%, -50%) scale(1.5); /* crop in tighter + hide chrome */
pointer-events: none;
}
.video-bg__overlay {
position: absolute;
inset: 0;
z-index: 2; /* blocks interaction with the player */
}
/* Respect reduced-motion: hide the moving video, keep the poster image. */
@media (prefers-reduced-motion: reduce) {
.video-bg__frame { display: none; }
}
/* Video lightbox (shared modal in footer.php) */
.video-modal .modal-content.video-modal__content {
background: #000;
border: 0;
border-radius: 6px;
overflow: hidden;
}
.video-modal__player { background: #000; }
/* Darker, navy-tinted backdrop behind the video lightbox */
body.video-open .modal-backdrop.show {
background-color: var(--mct-navy);
opacity: .92;
}
.video-modal__player > iframe,
.video-modal__player > video {
width: 100%;
height: 100%;
border: 0;
}
.video-modal__close {
position: absolute;
top: -2.5rem;
right: 0;
z-index: 2;
opacity: .9;
}
@media (max-width: 575.98px) {
.video-modal__close { top: .5rem; right: .5rem; }
}
/* -----------------------------------------------------------
* 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(--mct-font-heading);
color: var(--mct-navy);
font-size: 20px;
margin-bottom: .75rem;
}
.service-col__body {
font-size: 14px;
color: var(--mct-navy);
}
.service-col__link {
display: inline-block;
margin-top: .75rem;
font-family: var(--mct-font-heading);
font-size: 15px;
color: var(--mct-navy);
text-decoration: none;
}
.service-col__link:hover {
color: var(--mct-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(--mct-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(0,30,67,0) 50%, rgba(0,30,67,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(--mct-white);
}
.image-card__title {
font-family: var(--mct-font-heading);
font-size: 20px;
color: var(--mct-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(--mct-red);
}
.image-card--red .image-card__stripe { background: var(--mct-red); }
.image-card--yellow .image-card__stripe { background: var(--mct-yellow); }
.image-card--teal .image-card__stripe { background: var(--mct-teal); }
.image-card--navy .image-card__stripe { background: var(--mct-navy); }
/* -----------------------------------------------------------
* 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(--mct-navy);
color: var(--mct-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(--mct-navy);
color: var(--mct-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(--mct-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(0,30,67,0) 50%, rgba(0,30,67,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(--mct-white);
font-size: 20px;
background: var(--mct-teal);
border: 1px solid var(--mct-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(--mct-red);
border-color: var(--mct-red);
}
/* Titles — horizontal shown on active, vertical shown on inactive */
.project-tile__title {
position: absolute;
z-index: 2;
color: var(--mct-white);
font-family: var(--mct-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(--mct-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(0,30,67,0) 50%, rgba(0,30,67,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(--mct-white);
font-family: var(--mct-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(--mct-red);
border: 1px solid var(--mct-red);
color: var(--mct-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(--mct-teal);
border-color: var(--mct-teal);
color: var(--mct-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(--mct-font-heading);
font-size: 18px;
color: var(--mct-navy);
margin: 0;
line-height: 1.25;
}
.posts-carousel__title a { color: inherit; text-decoration: none; }
.posts-carousel__title a:hover { color: var(--mct-red); }
.posts-carousel__date {
color: var(--mct-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(--mct-yellow);
color: var(--mct-navy);
font-family: var(--mct-font-heading);
font-size: 13px;
padding: .35rem .75rem;
border-radius: 0;
}
.news-card__body { padding: 1.25rem 0; }
.news-card__date {
color: var(--mct-grey-600);
font-size: 13px;
margin: .75rem 0 0;
}
.news-card__title {
font-size: 18px;
margin: 0;
color: var(--mct-navy);
line-height: 1.25;
}
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--mct-red); }
.update-list { list-style: none; padding: 0; margin: 0; }
.update-list__item {
border-bottom: 1px solid var(--mct-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(--mct-font-heading);
font-size: 18px;
color: var(--mct-navy);
margin: 0;
}
.update-list__date { color: var(--mct-grey-600); font-size: 12px; }
.update-list__btn {
flex-shrink: 0;
width: 50px;
height: 50px;
background: var(--mct-navy);
color: var(--mct-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(--mct-red); }
/* -----------------------------------------------------------
* News page — title + filter toggle bar above the grid
* --------------------------------------------------------- */
.news-bar__title {
font-family: var(--mct-font-heading);
color: var(--mct-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(--mct-white);
width: min(420px, 100vw);
}
.news-filter-panel .offcanvas-header {
border-bottom: 1px solid var(--mct-grey-300);
padding: 1.25rem 1.5rem;
}
.news-filter-panel__heading {
font-size: 18px;
color: var(--mct-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(--mct-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(--mct-navy);
border: 1px solid var(--mct-navy);
}
.btn-outline-navy:hover { background: var(--mct-navy); color: var(--mct-white); }
/* -----------------------------------------------------------
* 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(--mct-navy);
margin: 0 0 .5rem;
}
.news-filters__field {
display: block;
width: 100%;
height: 56px;
padding: 0 1.25rem;
border: 1px solid var(--mct-grey-300);
border-radius: 0;
background: var(--mct-white);
color: var(--mct-navy);
font-family: var(--mct-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(--mct-teal);
box-shadow: 0 0 0 .15rem rgba(101,156,187,.25);
}
.news-filters__field::placeholder { color: rgba(0,30,67,.5); }
/* -----------------------------------------------------------
* Team cards — photo + name + position + LinkedIn icon
* --------------------------------------------------------- */
.team-card {
background: var(--mct-white);
display: flex;
flex-direction: column;
}
.team-card__photo {
position: relative;
overflow: hidden;
aspect-ratio: 4/5;
background: var(--mct-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(--mct-font-heading);
color: var(--mct-navy);
font-size: 22px;
margin: 0;
line-height: 1.2;
}
.team-card__position {
color: var(--mct-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(--mct-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(--mct-red) !important; }
/* About + Meet the Team intro sections — extra breathing room above */
.about-intro { padding-top: 5rem !important; }
/* -----------------------------------------------------------
* 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(0,30,67,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,30,67,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(--mct-teal);
margin-bottom: 1rem;
}
.contact-page__breadcrumb a {
color: var(--mct-teal);
text-decoration: none;
}
.contact-page__breadcrumb a:hover { color: var(--mct-navy); }
.contact-page__breadcrumb-sep { margin: 0 .35rem; }
.contact-page__title {
font-size: clamp(36px, 4vw, 48px);
color: var(--mct-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(--mct-navy);
margin: 0 0 .75rem;
}
.contact-page__details p { font-size: var(--mct-p); line-height: 1.5; color: var(--mct-navy); }
.contact-page__details a {
color: var(--mct-navy);
text-decoration: none;
}
.contact-page__details a:hover { color: var(--mct-red); }
/* Each location renders as a card in a responsive 2-column grid, with a
bottom border separating it from the content below. */
.contact-location {
height: 100%;
padding-bottom: 1.5rem;
border-bottom: 3px solid rgba(0,30,67,0.2);
}
.contact-location__name {
font-family: var(--mct-font-heading);
font-size: clamp(20px, 2vw, 26px);
color: var(--mct-navy);
margin: 0 0 1.25rem;
}
.contact-location__rows .contact-page__label { margin-bottom: .5rem; }
/* 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(--mct-grey-100);
padding: 3rem;
}
@media (max-width: 575.98px) {
.contact-page__form-box { padding: 1.75rem; }
}
.contact-page__form-title {
color: var(--mct-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(--mct-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(--mct-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(--mct-navy); }
.single-post-content blockquote {
border-left: 0;
margin: 2rem 0;
padding: 0;
font-family: var(--mct-font-heading);
font-size: 22px;
color: var(--mct-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(--mct-font-body);
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mct-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(--mct-grey-300); margin-bottom:3rem; }
.single-post-share__label {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
color: var(--mct-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(--mct-navy);
color: var(--mct-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(--mct-red); color: var(--mct-white); }
/* Jump to Section sidebar */
.single-post-toc {
position: relative;
}
.single-post-toc__heading {
font-family: var(--mct-font-heading);
color: var(--mct-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(--mct-navy);
text-decoration: none;
line-height: 1.4;
padding-left: 0;
}
.single-post-toc__list a:hover { color: var(--mct-red); }
.single-post-toc__list a.is-current {
font-weight: 700;
color: var(--mct-navy);
}
.single-post-toc__list .is-h3 { padding-left: 1rem; }
@media (min-width: 992px) {
.single-post-toc__inner {
position: sticky;
top: calc(var(--mct-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(--mct-font-heading);
font-size: clamp( 26px, 2.6vw, 34px );
color: var(--mct-navy);
margin: 0 0 1.25rem;
line-height: 1.15;
}
.csr-feature__para {
color: var(--mct-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(--mct-font-heading);
font-size: 24px;
color: var(--mct-navy);
margin: 0 0 1.5rem;
}
.csr-feature__highlight {
display: flex;
align-items: flex-start;
gap: 1rem;
color: var(--mct-navy);
}
.csr-feature__highlight-icon {
font-size: 30px;
color: var(--mct-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(--mct-grey-100);
background-image:
linear-gradient(rgba(0,30,67,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,30,67,0.05) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--mct-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(--mct-navy);
line-height: 1;
margin-bottom: 1.5rem;
}
.targets-card__title {
font-family: var(--mct-font-heading);
font-size: 22px;
color: var(--mct-navy);
margin: 0 0 1rem;
line-height: 1.2;
}
.targets-card__body,
.targets-card__body p {
color: var(--mct-navy);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.targets-card__body p + p { margin-top: .75rem; }
/* -----------------------------------------------------------
* 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; }
.roadmap__track {gap:0;}
}
/* 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(--mct-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(--mct-red);
z-index: 2;
}
.roadmap__item--red .roadmap__marker { background: var(--mct-red); }
.roadmap__item--yellow .roadmap__marker { background: var(--mct-yellow); }
.roadmap__item--teal .roadmap__marker { background: var(--mct-teal); }
.roadmap__item--navy .roadmap__marker { background: var(--mct-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(--mct-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(--mct-grey-100);
padding: 1.5rem;
color: var(--mct-navy);
}
.roadmap__item--above .roadmap__card { bottom: calc(50% + 60px); }
.roadmap__item--below .roadmap__card { top: calc(50% + 60px); }
.roadmap__title {
font-family: var(--mct-font-heading);
font-size: 18px;
color: var(--mct-navy);
margin: 0 0 .5rem;
text-align: center;
line-height: 1.2;
}
.roadmap__body,
.roadmap__body p {
color: var(--mct-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(--mct-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(0,30,67,0) 50%, rgba(0,30,67,0.7) 100%);
z-index: 1;
}
.quality-card__title {
position: absolute;
left: 2rem;
right: 5.5rem;
bottom: 2rem;
z-index: 2;
color: var(--mct-white);
font-family: var(--mct-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(--mct-red);
color: var(--mct-white);
font-size: 18px;
transition: background-color .15s ease;
}
.quality-card:hover .quality-card__arrow { background: var(--mct-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: #19305A;
color: #fff;
display: flex;
flex-direction: column;
padding: 2rem;
aspect-ratio: 4/4.2;
}
.quality-card--commitment::after { display: none; }
/* Decorative McTaggart vector mask, top-right, behind the text. Tint via
background-color; opacity softens it. Tweak width/height/offset to taste. */
.quality-card--commitment::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 70%;
height: 88%;
background-color: #659CBB;
opacity: 0.2;
-webkit-mask: url(../images/mctaggart-vector-mask.svg) no-repeat top right;
mask: url(../images/mctaggart-vector-mask.svg) no-repeat top right;
-webkit-mask-size: contain;
mask-size: contain;
z-index: 0;
pointer-events: none;
}
/* Keep the text above the decorative mask. */
.quality-card--commitment .quality-card__kicker,
.quality-card--commitment .quality-card__heading {
position: relative;
z-index: 1;
}
.quality-card--commitment .quality-card__kicker {
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 700;
color: #fff;
margin: auto 0 .75rem;
}
.quality-card--commitment .quality-card__heading {
font-family: var(--mct-font-heading);
color: #fff;
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(--mct-font-heading);
color: var(--mct-navy);
font-size: 24px;
line-height: 1.2;
margin: .25rem 0 0;
}
.project-split__body p { margin-bottom: 1.25rem; color: var(--mct-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(--mct-navy);
font-size: 16px;
line-height: 1.5;
}
.project-standards__bullet {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: .35rem;
background: var(--mct-red);
}
.project-standards__bullet--red { background: var(--mct-red); }
.project-standards__bullet--yellow { background: var(--mct-yellow); }
.project-standards__bullet--teal { background: var(--mct-teal); }
.project-standards__bullet--navy { background: var(--mct-navy); }
/* Testimonial block (light grey band) */
.project-testimonial {
background: var(--mct-grey-100);
margin-top: 3rem;
margin-bottom: 3rem;
}
.project-testimonial__quote {
font-family: var(--mct-font-heading);
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.3;
color: var(--mct-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(--mct-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(--mct-red);
color: var(--mct-white);
}
.single-post-share--red .single-post-share__list a:hover { background: var(--mct-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(--mct-teal);
padding: 1.25rem 1.5rem;
background: transparent;
color: var(--mct-navy);
font-family: var(--mct-font-body);
font-size: var(--mct-p);
line-height: 1.6;
margin: 1.5rem 0;
}
/* Apply Online form */
.single-career__apply-heading {
font-family: var(--mct-font-heading);
color: var(--mct-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(--mct-navy);
margin: 0 0 .5rem;
}
.career-apply-form__field {
width: 100%;
height: 44px;
padding: 0 1rem;
background: var(--mct-grey-100);
border: 1px solid var(--mct-grey-200);
border-radius: 0;
color: var(--mct-navy);
font-family: var(--mct-font-body);
font-size: 15px;
outline: none;
}
.career-apply-form__field:focus {
border-color: var(--mct-teal);
background: var(--mct-white);
}
.career-apply-form__upload {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
height: 80px;
background: var(--mct-grey-100);
border: 1px dashed var(--mct-grey-300);
color: var(--mct-navy);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.career-apply-form__upload:hover {
border-color: var(--mct-teal);
background: var(--mct-white);
}
.career-apply-form__upload .bi { font-size: 18px; color: var(--mct-teal); }
/* More Careers carousel */
.careers-carousel {
overflow: hidden;
padding-top: 6rem;
padding-bottom: 6rem;
background: var(--mct-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(--mct-grey-300);
padding: 1.5rem 0 0;
}
.careers-carousel__title {
font-family: var(--mct-font-heading);
color: var(--mct-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(--mct-red); }
.careers-carousel__excerpt {
color: var(--mct-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(--mct-font-heading);
color: var(--mct-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(--mct-font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mct-navy);
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--mct-grey-300);
transition: color .15s ease;
}
.policies-page__tab:hover { color: var(--mct-red); }
.policies-page__tab.is-active { color: var(--mct-red); }
.policies-page__nav li:last-child .policies-page__tab { border-bottom: 0; }
.policies-page__panel {
display: none;
}
.policies-page .policies-page__panel h1 {
margin-bottom:30px;
}
.policies-page__panel.is-active { display: block; }
.policies-page__panel h2,
.policies-page__panel h3 {
color: var(--mct-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; }
@media (max-width: 767.98px) {
.policies-page__nav{ margin-bottom: 2rem; }
}
/* 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(--mct-grey-100); }
/* Project location map (single project posts) */
.project-map__map {
width: 100%;
height: 460px;
}
@media (max-width: 767.98px) {
.project-map__map { height: 340px; }
}
.project-map__map.leaflet-container { background: var(--mct-grey-100); }
.mct-map-pin {
background: transparent;
border: 0;
filter: drop-shadow(0 4px 6px rgba(0,30,67,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(--mct-white);
padding: 2rem 1rem;
min-height: 140px;
cursor: pointer;
text-align: center;
border: 1px solid var(--mct-grey-300);
transition: border-color .15s ease, box-shadow .15s ease;
margin: 0;
}
.contact-form__card:hover { border-color: var(--mct-navy); }
.contact-form__card:has(input:checked) {
border-color: var(--mct-navy);
box-shadow: 0 0 0 2px var(--mct-navy);
}
.contact-form__icon {
font-size: 28px;
line-height: 1;
}
.contact-form__card--yellow .contact-form__icon { color: var(--mct-yellow); }
.contact-form__card--teal .contact-form__icon { color: var(--mct-teal); }
.contact-form__card--red .contact-form__icon { color: var(--mct-red); }
.contact-form__option-label {
color: var(--mct-navy);
font-family: var(--mct-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(--mct-white);
background: var(--mct-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(0,30,67,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(--mct-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(--mct-white);
text-decoration: none;
font-family: var(--mct-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(--mct-white); }
.cta-banner__chevron {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--mct-teal);
border: 1.5px solid var(--mct-teal);
color: var(--mct-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(--mct-teal);
background-image: url("../images/cement-blue.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
color: var(--mct-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(--mct-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(--mct-white);
text-decoration: none;
font-family: var(--mct-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(--mct-white); }
.hiring-cta__chevron {
display: inline-flex;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--mct-navy);
border: 1.5px solid var(--mct-navy);
color: var(--mct-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(--mct-red);
border-color: var(--mct-red);
}
/* -----------------------------------------------------------
* Accreditation logo strip
* --------------------------------------------------------- */
.accred-strip {
padding: 2.5rem 0 5rem;
background: var(--mct-white);
}
.accred-strip__title {
font-family: var(--mct-font-heading);
color: var(--mct-navy);
font-size: 28px;
line-height: 1.15;
margin: 0 0 .75rem;
}
.accred-strip__sub {
font-size: 13px;
color: var(--mct-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(--mct-grey-600);
margin: 0 0 .5rem;
}
.section-head__title { margin: 0; color: var(--mct-navy); }
/* -----------------------------------------------------------
* Carousel
* --------------------------------------------------------- */
.carousel-hero .carousel-img {
object-fit: cover;
width: 100%;
max-height: 70vh;
min-height: 320px;
}
.carousel-hero .carousel-caption {
background: rgba(0, 30, 67, 0.55);
padding: 1.5rem;
border-radius: 4px;
left: 5%;
right: 5%;
bottom: 8%;
}
.carousel-hero .carousel-caption__title {
color: var(--mct-white);
font-size: var(--mct-h2);
margin: 0 0 .5rem;
}
.carousel-control-prev,
.carousel-control-next { width: 5%; }
/* -----------------------------------------------------------
* Cards (Projects / Posts)
* --------------------------------------------------------- */
.post-card,
.project-card {
background: var(--mct-white);
border: 1px solid var(--mct-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(0,30,67,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(--mct-navy);
text-decoration: none;
}
.post-card__title a:hover,
.project-card__title a:hover { color: var(--mct-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(--mct-navy);
color: var(--mct-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(--mct-navy); color: var(--mct-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(--mct-grey-100);
background-image:
linear-gradient(rgba(0,30,67,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,30,67,0.05) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--mct-navy);
padding: 2rem 2.5rem 3rem;
scroll-snap-align: start;
display: flex;
flex-direction: column;
}
.testimonial-card__quote-mark {
font-family: var(--mct-font-heading);
font-size: 64px;
line-height: .8;
color: var(--mct-navy);
display: block;
margin-bottom: 1rem;
}
.testimonial-card__quote {
color: var(--mct-navy);
font-size: 16px;
line-height: 1.6;
margin: 0 0 1.5rem;
}
.testimonial-card__more {
color: var(--mct-navy);
text-decoration: underline;
}
.testimonial-card__more:hover { color: var(--mct-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(--mct-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(--mct-font-heading);
font-size: 17px;
color: var(--mct-navy);
margin: 0;
line-height: 1.2;
}
.testimonial-card__role {
color: var(--mct-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(--mct-font-heading);
font-size: 22px;
margin-bottom: 1rem;
}
.testimonial__author {
font-family: var(--mct-font-body);
font-weight: 500;
color: var(--mct-yellow);
}
/* -----------------------------------------------------------
* Careers archive — row-style listings + benefits split.
* --------------------------------------------------------- */
.career-list { border-top: 1px solid var(--mct-grey-300); }
.career-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 2.5rem 0;
border-bottom: 1px solid var(--mct-grey-300);
}
.career-row__main { flex: 1; min-width: 0; }
.career-row__title {
font-family: var(--mct-font-heading);
color: var(--mct-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(--mct-red); }
.career-row__excerpt {
color: var(--mct-navy);
font-size: var(--mct-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(--mct-navy);
}
.career-row__meta .bi { color: var(--mct-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%; justify-content:center;}
}
/* 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(--mct-navy);
font-family: var(--mct-font-heading);
font-size: 16px;
border-bottom: 3px solid transparent;
}
.career-pagination .page-numbers.current { border-bottom-color: var(--mct-red); background: transparent; color: var(--mct-navy); }
.career-pagination .page-numbers:hover { background: transparent; border-bottom-color: var(--mct-navy); color: var(--mct-navy); }
.career-pagination__nav {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--mct-navy);
color: var(--mct-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(--mct-navy);
color: var(--mct-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.
* --------------------------------------------------------- */
.mct-pagination { margin-top: 3rem; }
.mct-pagination__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .5rem;
}
.mct-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(--mct-font-heading);
font-size: 16px;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: color .15s ease;
}
.mct-pagination .page-numbers.current { color: var(--mct-navy); font-weight: 700; }
.mct-pagination a.page-numbers:hover { color: var(--mct-navy); }
/* Cycling accent underlines on the numbered pages */
.mct-pagination__num--red { border-bottom-color: var(--mct-red); }
.mct-pagination__num--yellow { border-bottom-color: var(--mct-yellow); }
.mct-pagination__num--teal { border-bottom-color: var(--mct-teal); }
/* Prev / next outlined chevron circles */
.mct-pagination .page-numbers.prev,
.mct-pagination .page-numbers.next {
min-width: 0;
padding: 0;
border-bottom: 0;
}
.mct-pagination .page-numbers.prev { margin-right: .75rem; }
.mct-pagination .page-numbers.next { margin-left: .75rem; }
.mct-pagination__nav {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--mct-navy);
color: var(--mct-navy);
align-items: center;
justify-content: center;
transition: background-color .15s ease, color .15s ease;
}
.mct-pagination .page-numbers:hover .mct-pagination__nav {
background: var(--mct-navy);
color: var(--mct-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(--mct-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(--mct-font-heading);
color: var(--mct-navy);
font-size: 22px;
margin: 0 0 .5rem;
}
.careers-benefits__item p {
color: var(--mct-navy);
font-size: 14px;
margin: 0;
line-height: 1.55;
}
/* -----------------------------------------------------------
* Footer
* --------------------------------------------------------- */
.site-footer {
background: var(--mct-navy);
color: var(--mct-white);
margin-top: 0;
}
.site-footer a { color: var(--mct-white); text-decoration: none; }
.site-footer a:hover { color: var(--mct-yellow); }
.site-footer .btn:hover,
.site-footer .btn-red:hover { color: var(--mct-white); }
.site-footer__heading {
color: rgba(255,255,255,0.55);
font-family: var(--mct-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(--mct-white); text-decoration: none; }
.site-footer__logo .custom-logo,
.site-footer__logo-img {
max-height: 110px;
width: auto;
display: block;
}
.site-footer__tag {
font-family: var(--mct-font-heading);
font-size: 22px;
color: var(--mct-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(--mct-teal);
color: var(--mct-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(--mct-teal);
border-color: var(--mct-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(--mct-white);
border: 1px solid var(--mct-grey-300);
color: var(--mct-navy);
text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: var(--mct-red);
color: var(--mct-white);
border-color: var(--mct-red);
}
/* -----------------------------------------------------------
* Forms
* --------------------------------------------------------- */
.form-control:focus {
border-color: var(--mct-teal);
box-shadow: 0 0 0 0.2rem rgba(101,156,187,0.25);
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--mct-navy);
color: var(--mct-white);
padding: 8px;
z-index: 2000;
}
.skip-link:focus { top: 0; }