/*
* CSS Custom Properties — International Blocks Theme
* All colours, spacing, and typography tokens live here.
* Never use inline styles or hardcoded hex values outside this file.
*/
:root {
/* ─── Brand Colours ─────────────────────────────────────────────── */
--ci-color-engage: #f99d31; /* Engage orange */
--ci-color-develop: #af4d76; /* Develop purple/pink */
--ci-color-innovate: #538da9; /* Innovate teal */
--ci-color-express: #cfd666; /* Express green */
--ci-color-navy: #1e2d3d; /* Dark navy */
/* ─── Neutral Palette ───────────────────────────────────────────── */
--ci-color-white: #ffffff;
--ci-color-off-white:#fafafa;
--ci-color-light-bg: #f5f5f5;
--ci-color-border: #d3d3d3;
--ci-color-text: #1e2d3d; /* Navy as base text */
--ci-color-text-muted: #6b6b6c;
/* ─── Typography ────────────────────────────────────────────────── */
--ci-font-primary: 'Lato', sans-serif;
--ci-font-secondary: 'Lato', sans-serif; /* Intentionally matches primary — Lato is the sole typeface */
/* ─── Navigation ────────────────────────────────────────────────── */
--ci-nav-height: 25px;
--ci-nav-bg: var(--ci-color-white);
--ci-nav-shadow: 0 10px 14px rgba(0, 0, 0, 0.01), 0 8px 16px rgba(0, 0, 0, 0.03);
--ci-nav-breakpoint: 1089px;
/* ─── Spacing ───────────────────────────────────────────────────── */
--ci-size-xs: 0.25rem;
--ci-size-sm: 0.5rem;
--ci-size-md: 1rem;
--ci-size-lg: 1.5rem;
--ci-size-xl: 2rem;
--ci-size-2xl: 3rem;
/* ─── Section rhythm ─────────────────────────────────────────────────────── */
--ci-section-padding: 5rem;
--ci-section-padding-mobile: 2rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
SITE CONTAINER
Max-width 1280px, centred, with 2rem side padding.
Use .site-container on any custom wrapper that needs to respect the grid.
WP block content width is set via theme.json contentSize (1280px) which
generates --wp--style--global--content-size for use in block templates.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--ci-container-width: 1280px;
--ci-container-padding: 2rem;
}
/* ── Global box model ───────────────────────────────────────────────────────
Border-box sizing prevents padding from pushing elements wider than their
container — the most common cause of mobile horizontal overflow. */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ── Overflow containment ───────────────────────────────────────────────────
overflow-x: clip does not create a new scroll container (unlike hidden),
so position: sticky headers continue to work correctly on all devices.
Applied to both html and body as a belt-and-suspenders safety net. */
html,
body {
margin: 0;
padding: 0;
overflow-x: clip;
}
/* ── Media safety ───────────────────────────────────────────────────────────
Images, videos and iframes should never exceed their container width. */
img,
video,
iframe {
max-width: 100%;
}
.site-container {
max-width: var(--ci-container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--ci-container-padding);
padding-right: var(--ci-container-padding);
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS
Reusable button styles used across all pages.
═══════════════════════════════════════════════════════════════════════════ */
.ci-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 400;
line-height: 1;
text-decoration: none;
border: none;
border-radius: 9999px;
padding: 0.9rem 2.25rem;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
/* Primary — gold */
.ci-btn--primary {
background-color: #c6a54e;
color: var(--ci-color-white);
}
/* Secondary — outlined navy */
.ci-btn--secondary {
background-color: transparent;
color: var(--ci-color-navy);
border: 2px solid var(--ci-color-navy);
}
/* Ghost — for use on dark backgrounds */
.ci-btn--ghost {
background-color: transparent;
color: var(--ci-color-white);
border: 2px solid var(--ci-color-white);
}
/* White — solid white fill for use on coloured/dark backgrounds */
.ci-btn--white {
background-color: var(--ci-color-white);
color: var(--ci-color-navy);
}
/* Small variant */
.ci-btn--sm {
font-size: 0.82rem;
padding: 0.55rem 1.25rem;
}
/* ── Mobile: tighter horizontal padding ── */
@media (max-width: 767px) {
.ci-btn {
padding: 0.85rem 1.5rem;
}
}
/* ── Hover styles — only on devices with a real pointer (not touchscreens) ── */
@media (hover: hover) and (pointer: fine) {
.ci-btn--primary:hover {
background-color: #b8943d;
color: var(--ci-color-white);
}
.ci-btn--secondary:hover {
background-color: var(--ci-color-navy);
color: var(--ci-color-white);
}
.ci-btn--ghost:hover {
background-color: var(--ci-color-white);
color: var(--ci-color-navy);
}
}
/* ── Active / tap styles — touch devices ── */
/* Mirrors hover colours so a tap gives the same visual feedback as a mouse click.
transition: none ensures the colour change is instant — a tap is ~100ms so a
180ms transition would complete after the finger has already lifted. */
@media (hover: none) {
/* Kill the transition on press so the colour snaps in immediately */
.ci-btn:active {
transition: none;
}
/* Specific button variants — on light/neutral backgrounds */
.ci-btn--primary:active { background-color: #b8943d; color: var(--ci-color-white); }
.ci-btn--secondary:active { background-color: var(--ci-color-navy); color: var(--ci-color-white); }
.ci-btn--ghost:active { background-color: rgba(255, 255, 255, 0.25); color: var(--ci-color-white); }
.ci-btn--white:active { background-color: rgba(255, 255, 255, 0.72); color: var(--ci-color-navy); }
/* CTA band sections (dark/maroon backgrounds) restyle every .ci-btn to white
via .xxx-cta .ci-btn { background: white } — specificity 0,2,0. The rules
above lose to that (0,1,1). [class*="-cta"] .ci-btn:active is 0,2,1 and wins,
giving a white-tint press flash on any button inside any CTA wrapper without
needing a per-component override in each file. */
[class*="-cta"] .ci-btn:active {
transition: none;
background-color: rgba(255, 255, 255, 0.72);
color: var(--ci-color-navy);
}
/* Ghost variant inside CTAs: subtler tint (transparent button, white border) */
[class*="-cta"] .ci-btn--ghost:active {
background-color: rgba(255, 255, 255, 0.22);
color: var(--ci-color-white);
}
/* Generic feedback for all other tappable elements (nav links, cards, accordions…) */
a:not(.ci-btn):active,
button:not(.ci-btn):active,
[role="button"]:active {
opacity: 0.65;
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SCROLL REVEAL
JS adds animation classes (.will-animate / .will-animate--fade etc.) only to
sections that are BELOW the fold. Above-fold content is never hidden, so
there is no opacity-flash on page load regardless of script timing.
The observer then adds .is-visible as each section scrolls into view.
Fully disabled when the user prefers reduced motion.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero image fade — JS-driven, fires on image load ─────────────────────────
Hero sections render immediately at full opacity (text visible from first
paint). Only the hero ![]()
starts hidden and fades in when the file arrives.
JS adds .is-loaded on the image's load event, or immediately if cached.
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.home-hero__image {
opacity: 0;
transition: opacity 0.4s ease;
}
.home-hero__image.is-loaded {
opacity: 1;
}
}
@media (prefers-reduced-motion: no-preference) {
/* ── Slide-up: most page sections ─────────────────────────────────────── */
.will-animate {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.will-animate.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ── Fade-only: full-width rows flush against other sections ──────────── */
/* (logo ticker, home testimonials, home CTA — translateY would create a */
/* visible gap before the adjacent approach-section slides in) */
.will-animate--fade {
opacity: 0;
transition: opacity 0.6s ease;
}
.will-animate--fade.is-visible {
opacity: 1;
}
/* ── Mobile-only: split-section children animate individually ─────────── */
/* On desktop the whole parent section (image + text side-by-side) enters */
/* the viewport together and gets a single slide-up animation. */
/* On mobile they stack vertically, so each panel is observed on its own. */
@media (max-width: 767px) {
/* Text panels — gentle slide + fade */
.will-animate--text {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.will-animate--text.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Image panels — opacity fade only, no position shift */
/* (translateY on images looks harsh / positional on mobile) */
.will-animate--image {
opacity: 0;
transition: opacity 0.65s ease;
}
.will-animate--image.is-visible {
opacity: 1;
}
}
}
/*
* Navigation — Main Nav Bar
* Matches the layout of cornerstones-education.co.uk
*/
/* ─── WP Admin Bar — keep dropdowns above sticky header ─────────────────── */
#wpadminbar,
#wpadminbar .ab-sub-wrapper {
z-index: 1000001 !important;
}
/* ─── Sticky Header ─────────────────────────────────────────────────────── */
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 1000000;
background-color: #ffffff;
}
/* ─── Admin bar offset — logged-in only, no effect on public visitors ────── */
.admin-bar header.wp-block-template-part {
top: 32px; /* desktop admin bar height */
}
@media (max-width: 782px) {
.admin-bar header.wp-block-template-part {
top: 46px; /* mobile admin bar height */
}
}
header + * {
margin-top: 0;
}
/* ─── Nav Container ─────────────────────────────────────────────────────── */
.mainnav-container {
box-shadow: var(--ci-nav-shadow);
width: 100%;
background-color: var(--ci-nav-bg);
}
.wp-block-group.mainnav-container,
header .mainnav-container {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
/* Constrain nav content width and pad sides */
.mainnav-wrapper {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* Contact bar — small strip above the main bar */
.mainnav-contact-bar {
padding: 0.4rem 0;
border-bottom: 1px solid var(--ci-color-border);
font-size: 0.875rem;
}
/* Main nav bar — logo left, links right */
.mainnav-item-bar {
position: relative;
display: flex;
align-items: stretch;
height: 55px;
gap: 1rem;
overflow: visible;
width: 100%;
}
/* Logo */
.mainnav-logo,
.mainnav-logo figure,
.mainnav-logo .wp-block-image {
margin: 0;
padding: 0;
line-height: 0;
display: flex;
align-items: center;
align-self: center;
}
.mainnav-logo img {
height: 36px;
width: auto;
display: block;
}
/* Nav links — stretch every level to full bar height, text centred within */
.mainnav-menu-links {
display: flex;
align-items: stretch;
align-self: stretch;
margin: 0;
padding: 0;
}
.mainnav-menu-links nav.wp-block-navigation,
.mainnav-menu-links ul.wp-block-navigation__container,
.mainnav-menu-links li.wp-block-navigation-item {
display: flex;
align-items: stretch;
align-self: stretch;
height: 100%;
margin: 0;
padding: 0;
}
.mainnav-menu-links li.wp-block-navigation-item {
display: flex;
align-items: stretch;
align-self: stretch;
margin: 0;
}
.mainnav-menu-links li.wp-block-navigation-item > a,
.mainnav-menu-links li.wp-block-navigation-item > button {
display: flex;
align-items: center;
align-self: stretch;
height: 100%;
margin: 0;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
/* ─── Top-level dropdown alignment ─────────────────────────────────────── */
/* Rule intentionally left empty — full-width fixed dropdowns need no offset */
/* ─── Menu Links ────────────────────────────────────────────────────────── */
.mainnav-menu-links a {
width: 100%;
}
/* ─── Login Button ──────────────────────────────────────────────────────── */
.mainnav-login-btn {
border-radius: 2rem;
padding: 0;
margin-left: auto;
}
.mainnav-login-btn a {
gap: 0.5em;
padding: 0.25em 1em;
border-radius: 2rem;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.25s ease;
min-width: 114px;
}
.mainnav-login-btn a::after {
content: "\f138";
font-family: "Font Awesome 7 Pro";
font-size: 1em;
font-weight: 900;
transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-login-btn a:hover::after {
transform: translateX(3px);
}
}
.mainnav-login-btn-secondary a::after {
display: none;
}
/* ─── Back Button (mobile) ──────────────────────────────────────────────── */
.mainnav-back-btn {
display: none;
}
/* ─── Submenus ──────────────────────────────────────────────────────────── */
.mainnav-menu-links .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
border: none;
box-shadow: var(--ci-nav-shadow);
min-width: 320px;
}
.mainnav-item-bar .wp-block-navigation__container.wp-block-navigation {
gap: 0;
}
.mainnav-container .wp-block-navigation__container.wp-block-navigation > li {
padding: 0;
display: flex;
align-items: stretch;
align-self: stretch;
height: 100%;
}
.mainnav-container li {
padding: 0 0.75rem 0 0;
}
.mainnav-container .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
padding-bottom: 0.75rem;
}
/* 3rd level: top-aligned */
.mainnav-menu-links .wp-block-navigation-submenu {
position: initial;
}
/* Full-height 3rd level */
.mainnav-menu-links .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
height: 100%;
}
.mainnav-menu-links .wp-block-navigation__submenu-container .wp-block-navigation-submenu button {
padding: 0;
}
/* ─── Icons ─────────────────────────────────────────────────────────────── */
.mainnav-container .mainnav-no-icon {
padding-left: 2.5rem;
}
.mainnav-icon {
width: 1rem;
font-size: 1.25rem;
margin: 0 0.75rem;
display: inline-flex;
justify-content: center;
align-content: center;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
top: 0;
}
@media (hover: hover) and (pointer: fine) {
/* ─── Hover Colours ─────────────────────────────────────────────────────── */
/* No background highlight on hover */
.mainnav-item-bar .wp-block-navigation-item:hover,
.mainnav-item-bar .wp-block-navigation-item:focus-within {
background-color: transparent;
}
}
/* Full-height, full-width hover target for top-level items */
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item > a,
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item > button {
display: flex;
align-items: center;
align-self: stretch;
height: 100%;
width: 100%;
padding: 0 0.75rem;
background-color: transparent;
}
/* Hide WP's separate chevron span — dead space outside the button */
.mainnav-item-bar .wp-block-navigation__submenu-icon {
display: none;
}
/* ─── Multi-column Dropdowns ────────────────────────────────────────────── */
.mainnav-2col ul {
columns: 2;
display: block;
gap: 0;
}
.mainnav-2col ul li {
width: 320px;
}
/* ─── Blank/spacer Items ────────────────────────────────────────────────── */
.mainnav-blank-item,
.mainnav-blank-item i,
.mainnav-blank-item a,
.mainnav-blank-item span {
background-color: transparent;
color: transparent;
cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-blank-item:hover,
.mainnav-blank-item i:hover,
.mainnav-blank-item a:hover,
.mainnav-blank-item span:hover {
background-color: transparent;
color: transparent;
cursor: default;
}
}
/* ─── Hamburger Icon ────────────────────────────────────────────────────── */
.mainnav-burger-icon {
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 999999;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
/* ─── Burger Animation ──────────────────────────────────────────────────── */
.mainnav-burger {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
user-select: none;
}
.mainnav-burger-rotate.active {
transform: rotate(45deg);
}
.mainnav-burger-line {
fill: none;
stroke: var(--ci-color-navy);
stroke-width: 5.5;
stroke-linecap: round;
}
.mainnav-burger-animation .mainnav-burger-top {
stroke-dasharray: 40 139;
}
.mainnav-burger-animation.active .mainnav-burger-top {
stroke-dashoffset: -98px;
}
.mainnav-burger-animation .mainnav-burger-bottom {
stroke-dasharray: 40 180;
}
.mainnav-burger-animation.active .mainnav-burger-bottom {
stroke-dashoffset: -138px;
}
/* ─── Mobile Menu Panel ─────────────────────────────────────────────────── */
.mainnav-menu-links {
background: var(--ci-color-white);
display: flex;
flex-direction: column;
width: 100%;
left: 0;
padding: 0;
position: fixed;
/* Pull up 1px to eliminate the sub-pixel gap that appears between the sticky
header bottom and the menu top on high-DPI screens. The header has a higher
z-index (1000000) so this 1px overlap is hidden behind it. */
top: calc(var(--nav-bottom, 64px) - 1px);
bottom: 0;
overflow: hidden;
z-index: 10000;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transition: opacity 0.28s ease,
pointer-events 0s linear 0.28s;
}
.mainnav-menu-links.active {
opacity: 1;
pointer-events: auto;
transition: opacity 0.28s ease;
}
/* ─── Click-outside Overlay ─────────────────────────────────────────────── */
.menu-overlay {
position: fixed;
top: 0;
left: 100%;
width: 0;
height: 100%;
background: rgba(0, 0, 0, 0.25);
transition: left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
opacity: 0;
pointer-events: none;
z-index: 999980;
}
.menu-overlay.active {
left: 75%;
width: 25%;
opacity: 0.5;
pointer-events: auto;
cursor: pointer;
}
/* ─── Submenu Flip ──────────────────────────────────────────────────────── */
.mainnav-container .open-left {
left: unset;
right: 100%;
}
/* ─── Logo in Mobile Menu ───────────────────────────────────────────────── */
.mainnav-logo-open-menu {
margin-top: auto;
align-self: center;
text-decoration: none;
border: none;
}
.mainnav-logo-open-menu img {
height: 2.5rem;
width: auto;
min-height: 40px;
min-width: 80px;
}
@media (hover: hover) and (pointer: fine) {
/* ─── Hover on non-icon items ───────────────────────────────────────────── */
.mainnav-container .mainnav-no-icon:hover {
background-color: transparent;
}
}
@media (hover: hover) and (pointer: fine) {
.mainnav-container .mainnav-blank-item:hover {
background-color: transparent;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE (max-width: 1089px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1089px) {
.mainnav-container {
box-shadow: none;
}
.mainnav-item-bar {
padding: 0 0;
height: 64px;
}
/* Hide desktop-only elements */
.mainnav-actions {
display: none;
}
/* Burger: flex child, pushed to far right.
.mainnav-item-bar prefix [0,2,0] beats Gutenberg's
.is-layout-flex > :is(*,div) { margin:0 } [0,1,1] */
.mainnav-item-bar .mainnav-toggler {
margin-left: auto;
display: flex;
align-items: center;
flex-shrink: 0;
}
.mainnav-burger-icon {
position: static;
transform: none;
}
/* These three rules must keep !important — WP block nav sets display via
inline styles and element+class specificity that cannot be beaten without
it. The container rule also needs it to override the block's own JS
toggling behaviour which writes inline styles. */
.wp-block-navigation__submenu-container {
display: none !important;
}
.wp-block-navigation-item.submenu-open > .wp-block-navigation__submenu-container {
display: block !important;
}
.wp-block-navigation__submenu-container.mainnav-menu-links {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 75% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding-top: 80px !important;
background: var(--ci-color-white) !important;
overflow-y: auto !important;
z-index: 999990 !important;
}
.mainnav-menu-links {
margin: 0;
}
.mainnav-menu-links button {
width: 100%;
}
.mainnav-menu-links .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
box-shadow: none;
}
.mainnav-menu-links ul {
display: flex;
flex-direction: column;
align-items: baseline;
gap: 0;
}
.mainnav-back-btn {
display: block;
cursor: pointer;
padding: 1.25rem 0;
}
.mainnav-back-btn::before {
content: "\e2e1";
font-family: "Font Awesome 7 Pro";
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin: 0 0.75rem;
width: 1rem;
}
.mainnav-contact-bar {
display: none;
}
.mainnav-menu-links ul {
margin: 0;
padding: 0;
}
/* Reset old WP nav list styles for new custom panels */
.mainnav-mobile-list li,
.mainnav-mobile-sublist li {
border-bottom: none;
padding: 0;
}
/* 3rd level — display/position/overflow must keep !important to override
WP block nav's own inline styles and JS toggling */
.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
display: block !important;
top: 0 !important;
width: 100% !important;
max-height: 80vh;
overflow-y: scroll !important;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
left: 0 !important;
}
.mainnav-menu-links nav {
flex-direction: column;
}
.mainnav-menu-links nav ul {
width: 100%;
}
.mainnav-login-btn {
margin-left: 0;
margin-top: var(--ci-size-lg);
}
/* Enquire + Login buttons inside mobile panel */
.mainnav-mobile-actions {
display: flex;
flex-direction: column;
margin-top: 0;
}
/* ── Item fade-in animation ── */
@keyframes mobileItemIn {
from { opacity: 0; }
to { opacity: 1; }
}
.mainnav-mobile-item,
.mainnav-mobile-actions {
opacity: 0;
}
.mainnav-menu-links.active .mainnav-mobile-item:nth-child(1) {
animation: mobileItemIn 0.28s ease forwards 0.06s;
}
.mainnav-menu-links.active .mainnav-mobile-item:nth-child(2) {
animation: mobileItemIn 0.28s ease forwards 0.11s;
}
.mainnav-menu-links.active .mainnav-mobile-item:nth-child(3) {
animation: mobileItemIn 0.28s ease forwards 0.17s;
}
.mainnav-menu-links.active .mainnav-mobile-item:nth-child(4) {
animation: mobileItemIn 0.28s ease forwards 0.20s;
}
.mainnav-menu-links.active .mainnav-mobile-item:nth-child(5) {
animation: mobileItemIn 0.28s ease forwards 0.23s;
}
.mainnav-menu-links.active .mainnav-mobile-actions {
animation: mobileItemIn 0.28s ease forwards 0.26s;
}
/* Sub-panel items stagger */
.mainnav-mobile-back,
.mainnav-mobile-group-label,
.mainnav-mobile-sublist li,
.mainnav-mobile-panel-sub .mainnav-mobile-cta,
.mainnav-mobile-cpd-link {
opacity: 0;
}
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-back {
animation: mobileItemIn 0.25s ease forwards 0.08s;
}
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-group-label:nth-of-type(1) { animation: mobileItemIn 0.25s ease forwards 0.13s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(1) li:nth-child(1) { animation: mobileItemIn 0.25s ease forwards 0.17s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(1) li:nth-child(2) { animation: mobileItemIn 0.25s ease forwards 0.21s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(1) li:nth-child(3) { animation: mobileItemIn 0.25s ease forwards 0.25s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(1) li:nth-child(4) { animation: mobileItemIn 0.25s ease forwards 0.29s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-group-label:nth-of-type(2) { animation: mobileItemIn 0.25s ease forwards 0.33s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(2) li:nth-child(1) { animation: mobileItemIn 0.25s ease forwards 0.37s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(2) li:nth-child(2) { animation: mobileItemIn 0.25s ease forwards 0.41s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(2) li:nth-child(3) { animation: mobileItemIn 0.25s ease forwards 0.45s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-group-label:nth-of-type(3) { animation: mobileItemIn 0.25s ease forwards 0.49s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist:nth-of-type(3) li:nth-child(1) { animation: mobileItemIn 0.25s ease forwards 0.53s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-group-label:nth-of-type(4) { animation: mobileItemIn 0.25s ease forwards 0.53s; }
.mainnav-mobile-panel-sub.is-active .mainnav-mobile-cta {
animation: mobileItemIn 0.25s ease forwards 0.53s;
}
/* CPD panel — single item appears quickly */
#mobile-sub-cpd.is-active .mainnav-mobile-cpd-link {
animation: mobileItemIn 0.22s ease forwards 0.18s;
}
/* ── Sliding panels container ── */
.mainnav-mobile-panels {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Primary and sub panels: stacked, sliding */
.mainnav-mobile-panel-primary,
.mainnav-mobile-panel-sub {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 0.75rem 2rem 2rem;
box-sizing: border-box;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.mainnav-mobile-panel-sub {
transform: translateX(100%);
}
/* Active state: primary slides out left, active sub slides in */
.mainnav-mobile-panels.sub-active .mainnav-mobile-panel-primary {
transform: translateX(-100%);
}
.mainnav-mobile-panel-sub.is-active {
transform: translateX(0);
}
/* ── Logo in panel ── */
.mainnav-mobile-logo {
display: block;
margin-bottom: 2rem;
}
.mainnav-mobile-logo img {
height: 36px;
width: auto;
}
/* ── Primary nav items ── */
.mainnav-mobile-list {
list-style: none;
margin: 0;
padding: 0;
}
.mainnav-mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.65rem 0;
border: none;
background: none;
font-family: var(--ci-font-primary);
font-size: 1.38rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ci-color-navy);
text-align: left;
cursor: pointer;
transition: color 0.15s ease;
}
/* ── Back button ── */
.mainnav-mobile-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0;
margin-bottom: 1.5rem;
border: none;
background: none;
font-family: var(--ci-font-primary);
font-size: 1.04rem;
font-weight: 600;
color: var(--ci-color-text-muted);
cursor: pointer;
transition: color 0.15s ease;
}
/* Left-pointing arrow for back button */
.mainnav-mobile-back-icon {
display: inline-block;
width: 7px;
height: 7px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
/* ── Sub-panel group labels ── */
.mainnav-mobile-group-label {
margin: 0.75rem 0 0.2rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--ci-color-text-muted);
}
.mainnav-mobile-group-label:first-of-type {
margin-top: 0.5rem;
}
/* ── Sub-panel links ── */
.mainnav-mobile-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.mainnav-mobile-sublink {
display: block;
padding: 0.5rem 0;
font-size: 1.38rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ci-color-navy);
text-decoration: none;
transition: color 0.15s ease;
}
/* ── CPD link (no chevron, navy → engage on hover) ── */
.mainnav-mobile-cpd-link {
display: block;
padding: 0.5rem 0;
font-size: 1.38rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ci-color-navy);
text-decoration: none;
transition: color 0.15s ease;
}
/* ── CTA link ── */
.mainnav-mobile-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0;
padding: 0.5rem 0;
font-size: 1.38rem;
font-weight: 700;
color: #c6a54e;
text-decoration: none;
transition: opacity 0.15s ease;
}
.mainnav-mobile-cta::after {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
.mainnav-mobile-cta--login {
color: #253d47;
}
/* ── Mobile site switcher ── */
.mainnav-mobile-region {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(37, 61, 71, 0.1);
opacity: 0;
}
.mainnav-menu-links.active .mainnav-mobile-region {
animation: mobileItemIn 0.28s ease forwards 0.29s;
}
.mainnav-mobile-region__label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--ci-color-text-muted);
margin-bottom: 0.6rem;
}
.mainnav-mobile-region__pills {
display: flex;
gap: 0.5rem;
}
.mainnav-mobile-region__pill {
padding: 0.4rem 1rem;
border-radius: 9999px;
border: 1.5px solid rgba(37, 61, 71, 0.2);
background: none;
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 600;
color: var(--ci-color-text);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.mainnav-mobile-region__pill--active {
background-color: #253d47;
border-color: #253d47;
color: #ffffff;
}
.mainnav-blank-item {
display: none;
}
.mainnav-2col ul {
columns: unset;
display: block;
gap: 0;
}
.mainnav-2col ul li {
width: 100%;
}
}
/* ── Desktop reset — suppress any inherited hover background on nav paragraphs ── */
@media (min-width: 1089px) and (hover: hover) and (pointer: fine) {
.mainnav-menu-links p:hover { background: none; }
}
/* ── Mobile nav hover — pointer devices only (trackpad / mouse on small viewport) ── */
@media (max-width: 1089px) and (hover: hover) and (pointer: fine) {
.mainnav-mobile-link:hover { color: #c6a54e; }
.mainnav-mobile-back:hover { color: var(--ci-color-navy); }
.mainnav-mobile-sublink:hover { color: #c6a54e; }
.mainnav-mobile-cpd-link:hover { color: #c6a54e; }
.mainnav-mobile-cta:hover { opacity: 0.75; }
.mainnav-mobile-region__pill:not(.mainnav-mobile-region__pill--active):hover { border-color: #253d47; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DESKTOP (min-width: 1089px)
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1089px) {
.mainnav-menu-links {
padding: 0;
position: initial;
}
.mainnav-menu-links p,
.mainnav-menu-links a {
padding: 0;
border-bottom: none;
}
.mainnav-burger-icon,
.menu-overlay,
.mainnav-logo-open-menu {
display: none;
}
/* Hide mobile panel on desktop */
.mainnav-menu-links {
display: none;
}
.mainnav-menu-links .wp-block-navigation-item__label {
width: 100%;
}
/* Premium fade for first-level dropdowns — no transform to avoid snap on close.
display/position/top/left/right/width/min-width/transform keep !important here
because WP block nav writes these as inline styles that cannot be beaten
by specificity alone. */
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
display: block !important;
position: fixed !important;
top: var(--nav-bottom, var(--ci-nav-height)) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
min-width: unset !important;
box-sizing: border-box;
padding-left: var(--nav-content-left, 0px);
opacity: 0;
transform: none !important;
visibility: hidden;
pointer-events: none;
/* Close: pure opacity fade */
transition: opacity 0.16s ease-in, visibility 0s linear 0.16s;
}
/* Shown via JS class — not :hover */
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item.has-child.is-dropdown-open > .wp-block-navigation__submenu-container {
opacity: 1;
transform: none !important;
visibility: visible;
pointer-events: auto;
/* Open: spring fade-in, visibility immediate */
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
/* 2-column compact grid — display/grid props keep !important to override
WP block nav inline styles that force display:block */
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.mainnav-2col-desktop {
display: grid !important;
grid-template-columns: repeat(2, 240px);
columns: unset;
align-content: start;
padding-right: var(--nav-content-left, 0px);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
gap: 0;
}
/* 4-column dropdown — display keeps !important for same reason as above */
.mainnav-item-bar .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.mainnav-4col {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
columns: unset;
padding-right: var(--nav-content-left, 0px);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
gap: 0;
}
.mainnav-4col > li {
width: auto;
padding-right: 1.5rem;
}
/* Page backdrop */
.nav-backdrop {
position: fixed;
top: var(--nav-bottom, 55px);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.15);
opacity: 0;
pointer-events: none;
/* Close transition — runs when .active is removed */
transition: opacity 0.16s ease-in;
z-index: 997;
}
.nav-backdrop.active {
opacity: 1;
/* Open transition — runs when .active is added */
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PRIMARY NAV (custom desktop nav — no WP navigation block)
═══════════════════════════════════════════════════════════════════════════ */
.mainnav-primary-nav {
display: none; /* mobile-first: hidden until desktop */
height: 100%;
align-items: stretch;
}
.mainnav-primary-list {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.mainnav-primary-item {
display: flex;
align-items: stretch;
}
.mainnav-primary-btn {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
background: none;
border: none;
cursor: pointer;
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 500;
color: var(--ci-color-text);
white-space: nowrap;
transition: color 0.15s ease;
}
.mainnav-primary-item.is-open > .mainnav-primary-btn {
color: #c6a54e;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-primary-item .mainnav-primary-btn--link,
.mainnav-primary-item .mainnav-primary-btn--link:hover,
.mainnav-primary-item .mainnav-primary-btn--link:visited {
text-decoration: none;
}
}
@media (hover: hover) and (pointer: fine) {
.mainnav-primary-item .mainnav-primary-btn--link:hover {
color: #c6a54e;
}
}
/* ─── Dropdown panel ──────────────────────────────────────────────────────── */
/* ── Instant switch: snap clip-path open, no transition ── */
.mainnav-item-bar.is-switching .mainnav-dropdown {
transition: none !important;
}
.mainnav-item-bar.is-switching .mainnav-primary-item.is-open > .mainnav-dropdown {
clip-path: inset(0 0 0% 0) !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* ── Item base state: hidden, with a soft transition for switch fades ── */
.mainnav-dropdown-label,
.mainnav-dropdown-links li,
.mainnav-dropdown-cta {
opacity: 0;
transition: opacity 0.15s ease;
}
/* ── Switch open (no is-animating): all items fade in together ── */
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-label,
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-links li,
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-cta {
opacity: 1;
}
/* ── Fresh open (is-animating): stagger animation overrides the transition ── */
@keyframes ddItemIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes megaColIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-label {
animation: ddItemIn 0.22s ease forwards 0.18s;
}
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(1) { animation: ddItemIn 0.22s ease forwards 0.22s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(2) { animation: ddItemIn 0.22s ease forwards 0.27s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(3) { animation: ddItemIn 0.22s ease forwards 0.31s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(4) { animation: ddItemIn 0.22s ease forwards 0.35s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(5) { animation: ddItemIn 0.22s ease forwards 0.38s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(6) { animation: ddItemIn 0.22s ease forwards 0.41s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(7) { animation: ddItemIn 0.22s ease forwards 0.44s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-cta { animation: ddItemIn 0.22s ease forwards 0.47s; }
.mainnav-dropdown {
position: fixed;
top: var(--nav-bottom, 55px);
left: 0;
right: 0;
background: var(--ci-color-white);
box-shadow: 0 16px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
z-index: 998;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.42s;
}
.mainnav-primary-item.is-open > .mainnav-dropdown {
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0% 0);
transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s;
}
.mainnav-dropdown-inner {
padding: 1.5rem 2rem 2rem;
padding-left: var(--logo-left, 2rem);
}
.mainnav-dropdown-inner--solo {
padding: 1.5rem 2rem;
padding-left: var(--logo-left, 2rem);
}
/* Category label (small muted heading above links) */
.mainnav-dropdown-label {
display: block;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ci-color-text-muted);
margin-bottom: 0.35rem;
}
/* Links list — Apple-style bold */
.mainnav-dropdown-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.mainnav-dropdown-links a {
display: block;
padding: 0.3rem 0;
color: var(--ci-color-navy);
text-decoration: none;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.3;
transition: color 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-dropdown-links a:hover {
color: #c6a54e;
}
}
/* CTA row */
.mainnav-dropdown-cta {
margin-top: 0;
padding-top: 0;
}
.mainnav-dropdown-cta--no-border {
margin-top: 0.5rem;
padding-top: 0;
border-top: none;
}
/* Option 1: plain orange text link */
.mainnav-cta-text {
display: block;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #c6a54e;
text-decoration: none;
transition: opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-cta-text:hover {
opacity: 0.7;
}
}
/* Option 2: orange text link with arrow */
.mainnav-cta-arrow {
display: block;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #c6a54e;
text-decoration: none;
transition: gap 0.15s ease, opacity 0.12s ease;
}
.mainnav-cta-arrow::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 8px;
vertical-align: middle;
position: relative;
top: -1px;
transition: transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-cta-arrow:hover {
opacity: 0.7;
}
}
@media (hover: hover) and (pointer: fine) {
.mainnav-cta-arrow:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
}
/* ─── Region pill switcher ───────────────────────────────────────────────── */
.mainnav-region {
position: relative;
width: fit-content;
}
.mainnav-region-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 0.375rem;
padding: 0.4375rem 0.875rem;
border-radius: 2rem;
border: 1.5px solid var(--ci-color-border);
background: none;
font-family: var(--ci-font-primary);
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
color: var(--ci-color-text);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-region-btn:hover {
border-color: var(--ci-color-text);
}
}
.mainnav-region-btn[aria-expanded="true"] {
border-color: var(--ci-color-navy);
}
/* CSS chevron */
.mainnav-region-chevron {
display: inline-block;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
position: relative;
top: -1px;
transition: transform 0.18s ease, top 0.18s ease;
}
.mainnav-region-btn[aria-expanded="true"] .mainnav-region-chevron {
transform: rotate(-135deg);
top: 2px;
}
/* Dropdown panel */
.mainnav-region-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--ci-color-white);
border: 1.5px solid var(--ci-color-border);
border-radius: 0.75rem;
list-style: none;
margin: 0;
padding: 0.3rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
opacity: 0;
transform: translateY(-6px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 1000;
}
.mainnav-region-dropdown.is-open {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.mainnav-container .mainnav-region-dropdown li {
padding: 0;
}
.mainnav-region-option {
display: block;
width: 100%;
padding: 0.4rem 0.75rem;
border: none;
background: none;
text-align: left;
font-family: var(--ci-font-primary);
font-size: 0.9rem;
font-weight: 500;
color: var(--ci-color-text);
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.12s ease;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-region-option:hover {
background: var(--ci-color-light-bg);
}
}
.mainnav-region-option--active {
font-weight: 700;
color: var(--ci-color-navy);
}
/* ─── Action buttons (Enquire + Login) ───────────────────────────────────── */
/* Shown only on desktop — mobile block sets display:none.
Declared here as desktop-only so the mobile rule (which comes earlier
in the file) is not overridden by equal-specificity order-of-appearance. */
@media (min-width: 1089px) {
.mainnav-actions {
display: flex;
align-items: center;
gap: 0.625rem;
}
/* Override Gutenberg's .is-layout-flex > :is(*, div) { margin: 0 } */
.mainnav-item-bar .mainnav-actions {
margin-left: auto;
}
}
.mainnav-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 1.125rem;
border: 1.5px solid transparent;
border-radius: 2rem;
font-family: var(--ci-font-primary);
font-size: 0.9rem;
line-height: 1;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.18s ease;
}
.mainnav-btn--enquire {
background-color: #c6a54e;
color: var(--ci-color-white);
}
@media (hover: hover) and (pointer: fine) {
.mainnav-btn--enquire:hover {
background-color: #b8943d;
}
}
.mainnav-btn--login {
background-color: #253d47;
color: var(--ci-color-white);
}
@media (hover: hover) and (pointer: fine) {
.mainnav-btn--login:hover {
background-color: #1a2d35;
}
}
/* Circled right-chevron icon */
.mainnav-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.7);
flex-shrink: 0;
position: relative;
}
.mainnav-btn-icon::after {
content: '';
display: block;
width: 4px;
height: 4px;
border-right: 1.5px solid var(--ci-color-white);
border-top: 1.5px solid var(--ci-color-white);
transform: rotate(45deg);
position: relative;
left: -1px;
}
@media (min-width: 1089px) {
.mainnav-primary-nav {
display: flex;
}
}
/* ─── Mega menu layout ───────────────────────────────────────────────────────── */
.mainnav-dropdown-inner--mega {
display: flex;
align-items: flex-start;
gap: 0;
padding: 1.75rem 2rem 2rem;
padding-left: var(--logo-left, 2rem);
}
.mainnav-mega-col {
display: flex;
flex-direction: column;
min-width: 200px;
padding: 0 2.5rem;
}
.mainnav-mega-col:first-child {
padding-left: 0;
}
/* CTA column — sits inline after the other columns */
.mainnav-mega-col--cta {
flex-shrink: 0;
padding-right: 0;
}
/* About menu: nudge CTA column left to reduce gap after narrow Support column */
#dd-about .mainnav-mega-col--cta {
padding-left: 1.25rem;
}
/* Pull the link list up to counteract the ::after arrow's line-box height */
.mainnav-mega-col--cta .mainnav-dropdown-links {
margin-top: -3px;
}
/* Keep CTA link orange — overrides the navy set by .mainnav-dropdown-links a */
.mainnav-mega-col--cta .mainnav-dropdown-links a {
color: #c6a54e;
}
@media (hover: hover) and (pointer: fine) {
.mainnav-mega-col--cta .mainnav-dropdown-links a:hover {
color: #c6a54e;
opacity: 0.7;
}
}
/* Row-by-row stagger: same nth-child position fires at the same time across all columns */
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-label { animation: megaColIn 0.25s ease forwards 0.20s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(1) { animation: megaColIn 0.25s ease forwards 0.27s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(2) { animation: megaColIn 0.25s ease forwards 0.34s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(3) { animation: megaColIn 0.25s ease forwards 0.41s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(4) { animation: megaColIn 0.25s ease forwards 0.48s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-cta { animation: megaColIn 0.25s ease forwards 0.55s; }
/* ═══════════════════════════════════════════════════════════════════════════
SMALL SCREENS (max-width: 520px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
.wp-block-navigation__submenu-container.mainnav-menu-links,
.mainnav-menu-links {
width: 100%;
}
.menu-overlay.active {
left: 100%;
width: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GLOBAL FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.site-footer {
background-color: var(--ci-color-off-white);
border-top: 1px solid var(--ci-color-border);
padding: 4rem 0 0;
font-family: var(--ci-font-primary);
margin-top: 0 !important;
}
/* ── Main grid: brand + nav columns ── */
.footer-main {
display: grid;
grid-template-columns: 1fr 3.5fr;
gap: 2.5rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid var(--ci-color-border);
}
/* Brand column */
.footer-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-logo img {
display: block;
width: 160px;
height: auto;
}
.footer-tagline {
font-size: 0.9rem;
font-weight: 700;
color: var(--ci-color-text);
margin: 0;
}
.footer-description {
font-size: 0.875rem;
line-height: 1.65;
color: var(--ci-color-text-muted);
margin: 0;
max-width: 280px;
}
/* Nav columns */
.footer-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
.footer-nav__heading {
font-size: 0.95rem;
font-weight: 700;
color: var(--ci-color-text);
margin: 0 0 1rem;
}
.footer-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-nav__list a {
font-size: 0.875rem;
color: var(--ci-color-text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.footer-nav__list a:hover {
color: var(--ci-color-text);
}
}
/* ── Social icons ── */
.footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
color: var(--ci-color-text-muted);
transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.footer-social__link--linkedin:hover {
color: #0A66C2;
}
}
@media (hover: hover) and (pointer: fine) {
.footer-social__link--instagram:hover {
color: #E1306C;
}
}
.footer-social__icon {
width: 20px;
height: 20px;
fill: currentColor;
display: block;
}
/* ── Bottom bar ── */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0;
gap: 1rem;
}
.footer-copyright {
font-size: 0.8rem;
color: var(--ci-color-text-muted);
margin: 0;
}
.footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5rem;
}
.footer-legal a {
font-size: 0.8rem;
color: var(--ci-color-text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.footer-legal a:hover {
color: var(--ci-color-text);
}
}
/* ── Mobile ── */
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer-nav {
grid-template-columns: repeat(2, 1fr);
}
.footer-description {
max-width: 100%;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.footer-legal {
flex-wrap: wrap;
gap: 1rem;
}
}
@media (max-width: 480px) {
.footer-nav {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPROACH PAGE — BANNER HERO
═══════════════════════════════════════════════════════════════════════════ */
.approach-banner {
position: relative;
width: 100%;
height: 82vh;
min-height: 520px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #1e2d3d;
}
.approach-banner__bg {
position: absolute;
inset: 0;
}
/* ── Working with us: shift focal point right on mobile ───────────────────────
The handshake sits to the right of centre in the image. On desktop the wide
crop keeps it in frame, but on mobile the narrow crop lands on the arm.
Shifting to ~72% moves the focal point onto the clasped hands. */
@media (max-width: 640px) {
.approach-banner--working .approach-banner__bg img {
object-position: 72% center;
}
}
.approach-banner__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.approach-banner__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
.approach-banner__content {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem var(--ci-container-padding, 2rem);
}
.approach-banner__title {
font-family: var(--ci-font-primary);
font-size: clamp(2rem, 5.5vw, 4.5rem);
font-weight: 400;
line-height: 1.15;
color: #ffffff;
margin: 0;
letter-spacing: -0.01em;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.75);
}
.approach-banner__subtitle {
font-family: var(--ci-font-primary);
font-size: clamp(0.95rem, 1.6vw, 1.25rem);
font-weight: 300;
color: #ffffff;
margin: 0.75rem 0 0;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8);
}
/* ═══════════════════════════════════════════════════════════════════════════
APPROACH PAGE — INTRO TEXT
═══════════════════════════════════════════════════════════════════════════ */
.approach-intro {
padding: 3.5rem 0;
background: var(--ci-color-white);
}
.approach-intro p {
font-family: var(--ci-font-primary);
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.approach-intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 640px) {
.approach-banner {
height: 52svh;
min-height: 300px;
}
.approach-intro {
padding: 2.5rem 0;
}
.approach-intro p {
font-size: 0.95rem;
line-height: 1.7;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPROACH PAGE — FULL-BLEED SPLIT SECTIONS
Dark navy text panel flush to one viewport edge, square image to the other.
═══════════════════════════════════════════════════════════════════════════ */
.approach-section {
margin-top: 0.3rem;
margin-bottom: 0;
}
.approach-section:last-of-type {
margin-bottom: 0;
}
/* Full-viewport 50:50 grid — no site-container */
.approach-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
width: 100%;
gap: 0.3rem;
min-height: 480px;
}
/* Dark text panel — centred within its half */
.approach-section__text-panel {
background: #253d47;
padding: 3.5rem 5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
justify-content: center;
align-items: flex-start;
}
.approach-section--reversed .approach-section__text-panel {
padding: 3.5rem 5rem;
}
.approach-section__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
font-weight: 700;
color: #c6a54e;
margin: 0;
line-height: 1.25;
}
.approach-section__text-panel p {
font-family: var(--ci-font-primary);
font-size: 1.15rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.88);
margin: 0;
}
.approach-section__text-panel strong {
color: #ffffff;
}
.approach-section__text-panel ul {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.approach-section__text-panel ul li {
font-family: var(--ci-font-primary);
font-size: 1.15rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
}
/* Suppress stray empty tags injected by wpautop into the grid as ghost grid items */
.approach-section__grid > p:empty {
display: none;
}
/* Image — fills its grid cell completely, matches text panel height */
.approach-section__image {
overflow: hidden;
min-height: 480px;
/* Placeholder colour while image downloads — matches the navy text panel
so the section looks like a unified dark block during load */
background-color: #253d47;
}
.approach-section__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Maroon text panel variant */
.approach-section--maroon .approach-section__text-panel {
background: #751a3b;
}
/* Image placeholder — used when no image is available yet */
.approach-section__image--placeholder {
background-color: #b0b0b0;
aspect-ratio: 1 / 1;
}
/* ── Mobile: stack vertically, image above text ── */
@media (max-width: 767px) {
.approach-section {
margin-top: 0.3rem;
margin-bottom: 0;
}
.approach-section__grid {
grid-template-columns: 1fr;
}
.approach-section__image {
min-height: 0;
aspect-ratio: 1 / 1;
order: -1;
}
.approach-section--reversed .approach-section__image {
order: -1;
}
.approach-section__text-panel,
.approach-section--reversed .approach-section__text-panel {
padding: 2rem var(--ci-container-padding);
}
.approach-section__heading {
font-size: clamp(1.2rem, 5vw, 1.6rem);
}
.approach-section__text-panel p {
font-size: 0.95rem;
line-height: 1.7;
}
.approach-section__text-panel ul li {
font-size: 0.95rem;
line-height: 1.7;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPROACH PAGE — VIDEO EMBED (facade pattern)
═══════════════════════════════════════════════════════════════════════════ */
.approach-video {
width: 100%;
margin-top: 0.3rem;
background: #ffffff;
padding: 3rem 0;
line-height: 0;
}
.approach-video__inner {
max-width: 960px;
margin: 0 auto;
padding: 0 var(--ci-container-padding, 2rem);
}
/* Facade — thumbnail + play button */
.approach-video__facade {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
cursor: pointer;
display: block;
overflow: hidden;
}
.approach-video__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.approach-video__facade:hover .approach-video__thumb {
transform: scale(1.02);
}
}
/* Play button — centred overlay */
.approach-video__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.25);
transition: background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.approach-video__facade:hover .approach-video__play {
background: rgba(0, 0, 0, 0.15);
}
}
.approach-video__play svg {
width: 68px;
height: 48px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
transition: transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.approach-video__facade:hover .approach-video__play svg {
transform: scale(1.1);
}
}
/* Injected iframe — replaces facade, constrained by inner wrapper */
.approach-video__iframe {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
border: none;
border-radius: 4px;
}
/* Full-width variant */
.approach-video--full {
padding: 0;
}
.approach-video--full .approach-video__facade {
border-radius: 0;
}
.approach-video--full .approach-video__iframe {
border-radius: 0;
}
/* ── Mobile ── */
@media (max-width: 640px) {
.approach-video__play svg {
width: 52px;
height: 37px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPROACH PAGE — CTA
═══════════════════════════════════════════════════════════════════════════ */
.approach-cta {
margin-top: 0.3rem;
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.approach-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 1.25rem;
max-width: 720px;
}
.approach-cta__body {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
margin: 0 auto 2.25rem;
}
.approach-cta__btn {
display: inline-block;
margin: 0 auto;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.approach-cta {
padding: 2rem 0;
text-align: left;
}
.approach-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.approach-cta__body {
font-size: 0.975rem;
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
.approach-cta__btn {
display: inline-block;
margin-left: 0;
}
}
/* ── White button on burgundy background ── */
.approach-cta .ci-btn {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.approach-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
BLOG PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.blog-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.blog-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 2rem;
}
.blog-hero__intro p {
font-family: var(--ci-font-primary);
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.blog-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.blog-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.blog-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.blog-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
BLOG PAGE — CONTENT (featured card + grid)
═══════════════════════════════════════════════════════════════════════════ */
.blog-content {
padding: 0 0 var(--ci-section-padding);
background-color: var(--ci-color-white);
}
/* ── Featured card ── */
.blog-featured {
display: grid;
grid-template-columns: 1fr 1fr;
border: none;
border-radius: 20px;
overflow: hidden;
margin-bottom: 2.5rem;
transition: box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.blog-featured:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
}
/* Featured image */
.blog-featured__image {
background-color: var(--ci-color-border);
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
}
.blog-featured__image span {
font-family: var(--ci-font-primary);
font-size: 0.78rem;
font-weight: 400;
color: #aaaaaa;
}
/* Featured body */
.blog-featured__body {
padding: 3rem 3rem 3rem 2.75rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
background-color: #253d47;
}
/* Featured tag */
.blog-featured__tag {
font-family: var(--ci-font-primary);
font-size: 0.68rem;
font-weight: 700;
border-radius: 9999px;
padding: 0.2rem 0.65rem;
background-color: #c6a54e;
color: #fff;
white-space: nowrap;
align-self: flex-start;
}
/* Featured title */
.blog-featured__title {
font-family: var(--ci-font-primary);
font-size: clamp(1.3rem, 2vw, 1.75rem);
font-weight: 700;
color: #c6a54e;
line-height: 1.25;
margin: 0;
}
/* Featured excerpt */
.blog-featured__excerpt {
font-family: var(--ci-font-primary);
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
margin: 0;
}
/* Featured read more link */
.blog-featured__link {
font-family: var(--ci-font-primary);
font-size: 0.95rem;
font-weight: 700;
color: #c6a54e;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: opacity 0.15s ease;
align-self: flex-start;
margin-top: 0.25rem;
}
.blog-featured__link::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
position: relative;
top: -1px;
transition: transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.blog-featured__link:hover {
opacity: 0.75;
}
}
@media (hover: hover) and (pointer: fine) {
.blog-featured__link:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
}
/* ── Blog grid ── */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* ── Blog card ── */
.blog-card {
display: flex;
flex-direction: column;
border: 1px solid var(--ci-color-border);
border-radius: 16px;
overflow: hidden;
background-color: var(--ci-color-white);
transition: box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.blog-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
}
/* Card image */
.blog-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--ci-color-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.blog-card__image span {
font-family: var(--ci-font-primary);
font-size: 0.78rem;
font-weight: 400;
color: #aaaaaa;
}
/* Card body */
.blog-card__body {
padding: 1.25rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
/* Card tag */
.blog-card__tag {
font-family: var(--ci-font-primary);
font-size: 0.68rem;
font-weight: 700;
border-radius: 9999px;
padding: 0.2rem 0.65rem;
background-color: #c6a54e;
color: #fff;
white-space: nowrap;
align-self: flex-start;
}
/* Card title */
.blog-card__title {
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 700;
color: #c6a54e;
line-height: 1.3;
margin: 0;
}
/* Card excerpt */
.blog-card__excerpt {
font-family: var(--ci-font-primary);
font-size: 0.9rem;
line-height: 1.6;
color: var(--ci-color-text-muted);
margin: 0;
flex: 1;
}
/* Card read more */
.blog-card__link {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 700;
color: #c6a54e;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: opacity 0.15s ease;
align-self: flex-start;
margin-top: 0.25rem;
}
.blog-card__link::after {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
position: relative;
top: -1px;
transition: transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.blog-card__link:hover {
opacity: 0.75;
}
}
@media (hover: hover) and (pointer: fine) {
.blog-card__link:hover::after {
transform: rotate(45deg) translate(2px, -2px);
}
}
/* ── Tablet ── */
@media (max-width: 900px) {
.blog-featured {
grid-template-columns: 1fr;
}
.blog-featured__image {
min-height: 260px;
}
.blog-featured__body {
padding: 2rem;
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
/* ── Mobile ── */
@media (max-width: 600px) {
.blog-content {
padding-bottom: var(--ci-section-padding-mobile);
}
.blog-featured__body {
padding: 1.5rem;
gap: 0.75rem;
}
.blog-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CASE STUDIES PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.cases-hero {
padding: var(--ci-section-padding) 0;
background-color: #253d47;
}
.cases-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 1.25rem;
}
.cases-hero__intro p {
font-size: 1.05rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 1.25rem;
}
.cases-hero__intro p:last-child {
margin-bottom: 0;
}
/* Match the wp-site-blocks gap colour to the hero so no white sliver shows when logged in */
.wp-site-blocks:has(.cases-hero) {
background-color: #253d47;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.cases-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.cases-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.cases-hero__heading-sub {
font-size: clamp(1rem, 4vw, 1.3rem);
}
.cases-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CASE STUDIES PAGE — CONTENT (filter bar, featured, grid)
═══════════════════════════════════════════════════════════════════════════ */
.cases-content {
padding: calc(var(--ci-section-padding) / 2) 0 var(--ci-section-padding);
background-color: var(--ci-color-white);
}
/* ── Filter bar ─────────────────────────────────────────────────────────── */
.cases-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
border-top: 1px solid var(--ci-color-border);
border-bottom: 1px solid var(--ci-color-border);
margin-bottom: 2.5rem;
}
.cases-filter__buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.cases-filter__btn {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 600;
color: var(--ci-color-text-muted);
background: none;
border: 1px solid var(--ci-color-border);
border-radius: 9999px;
padding: 0.45rem 1rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Active states — always applied on all devices */
.cases-filter__btn.is-active { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="all"].is-active { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="uk-independent"].is-active { background-color: #c6a54e; border-color: #c6a54e; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="middle-east"].is-active { background-color: #751a3b; border-color: #751a3b; color: var(--ci-color-white); }
/* Hover states — pointer devices only */
@media (hover: hover) and (pointer: fine) {
.cases-filter__btn:hover { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="all"]:hover { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="uk-independent"]:hover { background-color: #c6a54e; border-color: #c6a54e; color: var(--ci-color-white); }
.cases-filter__btn[data-filter="middle-east"]:hover { background-color: #751a3b; border-color: #751a3b; color: var(--ci-color-white); }
}
.cases-filter__testimonials-link {
font-size: 0.875rem;
font-weight: 600;
color: #c6a54e;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.15s ease;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.cases-filter__testimonials-link:hover {
opacity: 0.7;
}
}
/* ── Featured case study ────────────────────────────────────────────────── */
.cases-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: none;
border-radius: 6px;
overflow: hidden;
margin-bottom: 2.5rem;
background-color: #253d47;
}
.cases-featured__image {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
display: block;
}
.cases-featured__image-placeholder {
width: 100%;
height: 100%;
min-height: 360px;
background-color: var(--ci-color-light-bg);
border-right: 1px dashed var(--ci-color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--ci-color-text-muted);
font-size: 0.875rem;
font-family: var(--ci-font-primary);
}
.cases-featured__content {
padding: 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.cases-featured__meta {
display: flex;
align-items: center;
gap: 0.6rem;
}
.cases-featured__badge {
font-size: 0.725rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0.04em;
color: var(--ci-color-white);
background-color: #c6a54e;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
}
/* Featured meta tag — pill matching filter colours */
.cases-featured__tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: var(--ci-color-white);
border-radius: 9999px;
padding: 0.25rem 0.75rem;
}
/* Generic fallback — any unknown slug */
.cases-featured__tag { background-color: #253d47; }
/* Known-slug overrides */
.cases-featured__tag--uk-independent { background-color: #c6a54e; }
.cases-featured__tag--middle-east { background-color: #751a3b; }
.cases-featured__school {
font-family: var(--ci-font-primary);
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 700;
color: #c6a54e;
margin: 0;
line-height: 1.25;
}
.cases-featured__quote {
font-size: 1rem;
font-style: italic;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
margin: 0;
padding: 0;
border: none;
}
.cases-featured__attribution {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
.cases-featured__link {
font-size: 0.9rem;
font-weight: 700;
color: #c6a54e;
text-decoration: none;
transition: opacity 0.15s ease;
align-self: flex-start;
}
@media (hover: hover) and (pointer: fine) {
.cases-featured__link:hover {
opacity: 0.7;
}
}
/* ── Case study grid ────────────────────────────────────────────────────── */
.cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.case-card {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.10),
0 1px 4px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
cursor: pointer;
font-size: 0;
line-height: 0;
/* Height driven entirely by the image — no panel below */
display: block;
}
@media (hover: hover) and (pointer: fine) {
.case-card:hover {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.18),
0 4px 12px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
}
/* Full-card clickable overlay — sits above glass panel */
.case-card__cover-link {
position: absolute;
inset: 0;
z-index: 3;
}
/* Photo — fills the full card */
.case-card__image {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.case-card__image-placeholder {
width: 100%;
height: 320px;
background-color: #253d47;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.4);
font-size: 0.7rem;
line-height: 1.4;
font-family: var(--ci-font-primary);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ── Glass caption bar — floats over the bottom of the photo ── */
.case-card__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 1.25rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 1rem;
line-height: 1.4;
/* Frosted glass over the photo */
background: rgba(180, 180, 180, 0.22);
backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
border-top: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
/* Faint top-left sheen on the glass panel */
.case-card__details::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
}
/* Category label */
.case-card__tag {
font-family: var(--ci-font-primary);
font-size: 0.7rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.1em;
text-transform: uppercase;
background: none;
border: none;
padding: 0;
align-self: flex-start;
position: relative;
z-index: 1;
}
/* Title */
.case-card__name {
font-family: var(--ci-font-primary);
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.3;
position: relative;
z-index: 1;
}
/* Hidden state when filtered out */
.case-card.is-hidden,
.cases-featured.is-hidden {
display: none;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.cases-content {
padding-bottom: var(--ci-section-padding-mobile);
}
.cases-filter {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.cases-featured {
grid-template-columns: 1fr;
}
.cases-featured__image {
min-height: 220px;
}
.cases-featured__image-placeholder {
min-height: 220px;
border-right: none;
border-bottom: 1px dashed var(--ci-color-border);
}
.cases-featured__content {
padding: 1.5rem;
}
.cases-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.case-card__image,
.case-card__image-placeholder {
height: 260px;
}
.case-card__details {
padding: 1rem 1.25rem 1.25rem;
}
.case-card__name {
font-size: 1rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CASE STUDIES PAGE — CTA
═══════════════════════════════════════════════════════════════════════════ */
.cases-cta {
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.cases-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 2rem;
max-width: 680px;
}
.cases-cta__btn {
display: inline-block;
margin: 0 auto;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.cases-cta {
padding: 2rem 0;
text-align: left;
}
.cases-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
margin-bottom: 1.5rem;
}
.cases-cta__btn {
display: inline-block;
margin-left: 0;
}
}
/* ── White button on burgundy background ── */
.cases-cta .ci-btn {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.cases-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CASE STUDY — SINGLE PAGE
═══════════════════════════════════════════════════════════════════════════ */
/* Hide stray wpautop
injected between block template parts */
.wp-site-blocks > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
.wp-block-shortcode {
display: block;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove WP's auto padding-top (added for sticky headers) so the hero sits
flush against the nav bar for all visitors, logged in or out. */
.single-case-studies .wp-site-blocks,
.single-case-studies .wp-site-blocks > .wp-block-template-part,
.single-case-studies .wp-block-shortcode,
.single-case-studies .wp-block-shortcode > p:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
.single-case-studies .wp-site-blocks {
gap: 0 !important;
}
/* Pull the hero up to cover any remaining gap from WP's sticky-header offset */
.single-case-studies .ci-cs-hero {
margin-top: -55px;
}
.admin-bar.single-case-studies .ci-cs-hero {
margin-top: calc(-55px + 32px);
}
@media (max-width: 1089px) {
.single-case-studies .ci-cs-hero {
margin-top: -64px;
}
.admin-bar.single-case-studies .ci-cs-hero {
margin-top: calc(-64px + 46px);
}
}
/* ── Hero (photo only) ───────────────────────────────────────────────────── */
.ci-cs-hero {
position: relative;
width: 100%;
aspect-ratio: 16 / 5.25;
overflow: visible; /* badge hangs below into title bar */
background-color: #253d47;
margin-top: 0;
}
/* Clip wrapper — image + overlay stay inside the photo bounds */
/* border-bottom creates the 0.3rem white gap consistent with split sections */
.ci-cs-hero__clip {
position: absolute;
inset: 0;
overflow: hidden;
border-bottom: 0.3rem solid #ffffff;
}
.ci-cs-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.ci-cs-hero__placeholder {
position: absolute;
inset: 0;
background-color: #d8d8d8;
display: flex;
align-items: center;
justify-content: center;
}
.ci-cs-hero__placeholder::after {
content: 'Image coming soon';
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 600;
color: #999999;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Subtle vignette — keeps tags readable, not a title-holding gradient */
.ci-cs-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(10, 20, 30, 0.15) 60%,
rgba(10, 20, 30, 0.45) 100%
);
}
/* Tag pills — sit in the navy title bar (rendered there in PHP) */
.ci-cs-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.ci-cs-hero__tag {
display: inline-block;
padding: 0.4rem 1.1rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
}
/* Badge wrap — sits at the hero bottom, badge straddles into title bar */
.ci-cs-hero__badge-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(50%);
z-index: 3;
}
.ci-cs-hero__badge {
width: 260px;
height: 260px;
border-radius: 50%;
overflow: hidden;
background: #ffffff;
border: 0.3rem solid #ffffff;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.ci-cs-hero__badge img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.ci-cs-hero__badge--empty {
background: #e0e0e0;
}
/* ── Title bar (dark navy, below hero) ───────────────────────────────────── */
.ci-cs-title-bar {
background-color: #253d47;
/* Top padding: half badge height (260/2 = 130px) + breathing room */
padding: calc(130px + 1.25rem) 0 2.5rem;
position: relative;
}
.ci-cs-title-bar__title {
font-family: var(--ci-font-primary);
font-size: clamp(1.75rem, 3.5vw, 3rem);
font-weight: 700;
line-height: 1.15;
color: #ffffff;
margin: 0;
}
/* Container needs relative positioning so tags align to its right edge */
.ci-cs-title-bar .site-container {
position: relative;
}
/* Tags — top-right of the container, at badge level */
.ci-cs-title-bar .ci-cs-hero__tags {
position: absolute;
top: calc(-130px / 2 - 1rem); /* up from the content area, at badge mid-line */
right: 0;
margin-top: 0;
justify-content: flex-end;
}
.ci-cs-title-bar .ci-cs-hero__tag {
font-size: 1rem;
padding: 0.6rem 1.5rem;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
}
/* Cycle through brand-accent colours matching the mockup */
.ci-cs-title-bar .ci-cs-hero__tag:nth-child(1) {
background: #7B6FBE;
border-color: #7B6FBE;
}
.ci-cs-title-bar .ci-cs-hero__tag:nth-child(2) {
background: #2E8B6E;
border-color: #2E8B6E;
}
.ci-cs-title-bar .ci-cs-hero__tag:nth-child(3) {
background: #c6a54e;
border-color: #c6a54e;
}
.ci-cs-title-bar .ci-cs-hero__tag:nth-child(n+4) {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.35);
}
/* ── Intro body ──────────────────────────────────────────────────────────── */
.ci-cs-intro {
background-color: #253d47;
padding: 0 0 2.75rem;
}
.ci-cs-intro__body {
font-family: var(--ci-font-primary);
font-size: 1.0625rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
}
.ci-cs-intro__body p {
margin: 0 0 1rem;
}
.ci-cs-intro__body strong {
color: #ffffff;
}
/* ── Content sections ────────────────────────────────────────────────────── */
.ci-cs-section {
padding: 3rem 0;
background-color: var(--ci-color-white);
border-top: 1px solid #e8e8e8;
}
.ci-cs-section__inner {
width: 100%;
}
.ci-cs-section__title {
font-family: var(--ci-font-primary);
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
font-weight: 700;
color: #c6a54e;
margin: 0 0 1rem;
line-height: 1.25;
}
.ci-cs-section__body {
font-family: var(--ci-font-primary);
font-size: 1.0625rem;
line-height: 1.8;
color: #333333;
}
.ci-cs-section__body p {
margin: 0 0 1.25rem;
}
.ci-cs-section__body ul,
.ci-cs-section__body ol {
margin: 0 0 1.25rem 1.5rem;
padding: 0;
}
.ci-cs-section__body li {
margin-bottom: 0.4rem;
}
.ci-cs-section__body strong {
font-weight: 700;
color: #253d47;
}
/* ── Full width mid-page image ───────────────────────────────────────────── */
.ci-cs-mid-image {
width: 100%;
aspect-ratio: 16 / 4;
overflow: hidden;
}
.ci-cs-mid-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ci-cs-mid-image--placeholder {
background: linear-gradient(135deg, #d8d8d8 0%, #e8e8e8 100%);
}
/* ── CTA block ───────────────────────────────────────────────────────────── */
.ci-cs-cta {
background-color: #751a3b;
padding: 3.5rem 0;
text-align: center;
}
.ci-cs-cta__title {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: #ffffff;
margin: 0 auto 1rem;
max-width: 680px;
}
.ci-cs-cta__body {
font-family: var(--ci-font-primary);
font-size: 1.0625rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
margin: 0 auto 2rem;
max-width: 600px;
}
.ci-cs-cta__buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.ci-cs-cta__btn {
background-color: #ffffff;
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.ci-cs-cta__btn:hover {
background-color: rgba(255, 255, 255, 0.9);
color: #751a3b;
}
}
.ci-cs-cta__link {
font-family: var(--ci-font-primary);
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.ci-cs-cta__link:hover {
color: #ffffff;
}
}
/* ── Testimonials ────────────────────────────────────────────────────────── */
.ci-cs-testimonials {
padding: 3.5rem 0;
background-color: #253d47;
}
.ci-cs-testimonials__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.3rem, 2vw, 1.75rem);
font-weight: 700;
color: #c6a54e;
text-align: center;
margin: 0 0 2.25rem;
line-height: 1.2;
}
/* wpautop injects a
between name and school spans — suppress it */
.ci-cs-testimonials__attribution br {
display: none;
}
.ci-cs-testimonials__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.ci-cs-testimonials__card {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 1.75rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
/* Same grey frosted glass as home page */
background: rgba(180, 180, 180, 0.22);
backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.ci-cs-testimonials__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
z-index: 0;
}
.ci-cs-testimonials__card > * {
position: relative;
z-index: 1;
}
.ci-cs-testimonials__header {
display: flex;
align-items: center;
gap: 1rem;
}
.ci-cs-testimonials__logo {
flex-shrink: 0;
width: 68px;
height: 68px;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.ci-cs-testimonials__logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.ci-cs-testimonials__attribution {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-self: center;
}
.ci-cs-testimonials__name {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 700;
color: #ffffff;
line-height: 1.3;
}
.ci-cs-testimonials__school {
font-family: var(--ci-font-primary);
font-size: 0.8rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.60);
line-height: 1.3;
}
.ci-cs-testimonials__quote {
font-family: var(--ci-font-primary);
font-size: 0.95rem;
font-style: normal;
line-height: 1.75;
color: rgba(255, 255, 255, 0.90);
margin: 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* ── Pull quote panel ────────────────────────────────────────────────────── */
.ci-cs-pull-quote {
background-color: #253d47;
padding: 3.5rem 0;
}
.ci-cs-pull-quote__inner {
max-width: 780px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.ci-cs-pull-quote__mark {
font-family: Georgia, serif;
font-size: 5rem;
line-height: 0.8;
color: #c6a54e;
margin-bottom: 1rem;
display: block;
opacity: 0.9;
}
.ci-cs-pull-quote__text {
font-family: var(--ci-font-primary);
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-style: italic;
font-weight: 400;
line-height: 1.75;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 1.25rem;
border: none;
padding: 0;
background: none;
}
.ci-cs-pull-quote__attr {
font-family: var(--ci-font-primary);
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.ci-cs-hero {
aspect-ratio: 4 / 2.25;
}
.ci-cs-hero__badge {
width: 160px;
height: 160px;
}
.ci-cs-title-bar {
padding-top: calc(80px + 1rem); /* half of 160px badge */
}
.ci-cs-title-bar__title {
font-size: clamp(1.5rem, 5vw, 2.2rem);
}
.ci-cs-title-bar .ci-cs-hero__tags {
top: calc(-80px / 2 - 0.75rem);
right: 0;
}
.ci-cs-title-bar .ci-cs-hero__tag {
font-size: 0.875rem;
padding: 0.5rem 1.1rem;
}
.ci-cs-section {
padding: 2rem 0;
}
.ci-cs-section__body {
font-size: 1rem;
}
.ci-cs-mid-image {
aspect-ratio: 16 / 7;
}
.ci-cs-testimonials {
padding: 2.5rem 0;
}
.ci-cs-testimonials__grid {
grid-template-columns: 1fr;
}
.ci-cs-testimonials__card {
padding: 1.25rem;
}
.ci-cs-testimonials__logo {
width: 52px;
height: 52px;
}
.ci-cs-pull-quote {
padding: 2.5rem 0;
}
.ci-cs-pull-quote__mark {
font-size: 3.5rem;
}
.ci-cs-cta {
padding: 2.5rem 0;
text-align: left;
}
.ci-cs-cta__title {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.ci-cs-cta__body {
margin-left: 0;
margin-right: 0;
}
.ci-cs-cta__buttons {
justify-content: flex-start;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHANGES PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.changes-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
background-size: cover;
background-position: center;
}
.changes-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 2rem;
}
/* Second sentence — slightly smaller, same colour */
.changes-hero__heading-sub {
display: block;
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-weight: 400;
margin-top: 0.4rem;
line-height: 1.3;
}
.changes-hero__intro p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.changes-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.changes-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.changes-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.changes-hero__heading-sub {
font-size: clamp(1rem, 4vw, 1.3rem);
}
.changes-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CHANGES PAGE — CTA
═══════════════════════════════════════════════════════════════════════════ */
.changes-cta {
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.changes-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 1.25rem;
max-width: 720px;
}
.changes-cta__body {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 100%;
margin: 0 auto 2.25rem;
}
/* Button row */
.changes-cta__actions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin: 0 auto;
}
/* ── Buttons on maroon background ── */
.changes-cta .ci-btn--primary {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.changes-cta .ci-btn--primary:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
.changes-cta .ci-btn--ghost {
background-color: transparent;
color: var(--ci-color-white);
border-color: var(--ci-color-white);
}
@media (hover: hover) and (pointer: fine) {
.changes-cta .ci-btn--ghost:hover {
background-color: var(--ci-color-white);
color: #751a3b;
}
}
/* ── Mobile ── */
@media (max-width: 767px) {
.changes-cta {
padding: 2rem 0;
text-align: left;
}
.changes-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.changes-cta__body {
font-size: 0.975rem;
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
.changes-cta__actions {
flex-direction: column;
align-items: flex-start;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
REUSABLE IMAGE SLIDER
═══════════════════════════════════════════════════════════════════════════ */
.ci-slider {
position: relative;
user-select: none;
}
/* Clips the sliding track */
.ci-slider__viewport {
overflow: hidden;
border-radius: 6px;
}
/* Sliding track — all slides in a row */
.ci-slider__track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.ci-slider__slide {
flex: 0 0 100%;
width: 100%;
}
/* ── Arrows ── */
.ci-slider__prev,
.ci-slider__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--ci-color-white);
border: 1px solid var(--ci-color-border);
color: var(--ci-color-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
z-index: 2;
/* Offset so they sit just outside the viewport */
margin-top: -1.5rem; /* nudge up to account for dots below */
}
.ci-slider__prev { left: -22px; }
.ci-slider__next { right: -22px; }
@media (hover: hover) and (pointer: fine) {
.ci-slider__prev:hover,
.ci-slider__next:hover {
background-color: #253d47;
border-color: #253d47;
color: var(--ci-color-white);
}
}
/* ── Dot indicators ── */
.ci-slider__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.25rem;
}
.ci-slider__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--ci-color-border);
border: none;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ci-slider__dot--active {
background-color: #253d47;
transform: scale(1.3);
}
/* ── Mobile: hide arrows, rely on dots / swipe ── */
@media (max-width: 767px) {
.ci-slider__prev,
.ci-slider__next {
display: none;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.ci-slider__track {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
REUSABLE SPLIT SECTIONS (50:50)
Use .ci-split for text-left / image-right.
Add .ci-split--reversed for image-left / text-right.
Add .ci-split--alt for the off-white alternating background.
═══════════════════════════════════════════════════════════════════════════ */
.ci-split {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.ci-split--alt {
background-color: #253d47;
}
.ci-split--alt .ci-split__heading {
color: #c6a54e;
}
.ci-split--alt .ci-split__text p {
color: rgba(255, 255, 255, 0.88);
}
.ci-split--alt .ci-split__closing {
color: rgba(255, 255, 255, 0.88) !important;
}
/* 50:50 grid */
.ci-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
/* Text column */
.ci-split__text {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ci-split__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.4rem, 2.2vw, 2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-text);
margin: 0;
}
.ci-split__text p {
font-size: 1rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0;
}
/* Closing statement — bold emphasis */
.ci-split__closing {
font-weight: 700;
color: var(--ci-color-navy) !important;
}
/* Callout — e.g. Big Ideas list */
.ci-split__callout {
font-weight: 700;
font-size: 1.05rem !important;
color: var(--ci-color-text) !important;
line-height: 1.6 !important;
}
.ci-split--alt .ci-split__callout {
color: #fff !important;
}
/* Inline CTA button within a split — e.g. "Book a free curriculum audit" */
.ci-split__btn {
align-self: flex-start;
margin-top: 0.5rem;
}
@media (max-width: 767px) {
.ci-split__btn {
align-self: flex-start;
}
}
/* Chevron text links — e.g. "Stay informed" split */
.ci-split__links {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ci-split__link {
font-size: 0.95rem;
font-weight: 600;
color: #c6a54e;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: opacity 0.15s ease;
}
.ci-split__link::after {
content: '›';
font-size: 1.2em;
line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
.ci-split__link:hover {
opacity: 0.7;
}
}
/* Real image */
.ci-split__image {
width: 100%;
border-radius: 4px;
overflow: hidden;
/* Warm neutral placeholder while image downloads — visible on white sections */
background-color: #e8e3da;
}
/* On dark sections the placeholder should match the navy background */
.ci-split--alt .ci-split__image {
background-color: #1e3239;
}
.ci-split__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 4px;
}
/* Image placeholder */
.ci-split__image-placeholder {
width: 100%;
min-height: 380px;
background-color: var(--ci-color-light-bg);
border: 1px dashed var(--ci-color-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ci-color-text-muted);
font-size: 0.95rem;
font-family: var(--ci-font-primary);
}
/* ── Mobile: stack, hide image ── */
@media (max-width: 767px) {
.ci-split {
padding: var(--ci-section-padding-mobile) 0;
}
.ci-split__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ci-split__image-placeholder {
min-height: 220px;
order: -1;
}
.ci-split__image {
order: -1;
}
.ci-split__image img {
height: 220px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.cpd-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.cpd-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 2rem;
}
.cpd-hero__intro p {
font-family: var(--ci-font-primary);
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.cpd-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.cpd-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.cpd-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.cpd-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD PAGE — CONTENT (filter bar, card grid)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Temporary section (shown while programmes grid is hidden) ── */
.cpd-temp-section {
padding: var(--ci-section-padding) 0;
background: #751a3b;
text-align: center;
}
.cpd-temp-section__inner {
max-width: 640px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.cpd-temp-section__inner p {
font-family: var(--ci-font-primary);
font-size: 1.1rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 1.5rem;
}
.cpd-temp-section__btn {
margin-top: 0.25rem;
}
.cpd-content {
padding: 0 0 var(--ci-section-padding);
background-color: var(--ci-color-white);
}
/* ── Filter bar ── */
.cpd-filter {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1.25rem 0;
border-top: 1px solid var(--ci-color-border);
border-bottom: 1px solid var(--ci-color-border);
margin-bottom: 2.5rem;
}
.cpd-filter__btn {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 600;
color: var(--ci-color-text-muted);
background: none;
border: 1px solid var(--ci-color-border);
border-radius: 9999px;
padding: 0.45rem 1rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Per-button active colours — always applied on all devices */
.cpd-filter__btn[data-filter="all"].is-active { background-color: var(--ci-color-innovate); border-color: var(--ci-color-innovate); color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="webinar"].is-active { background-color: #c6a54e; border-color: #c6a54e; color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="support"].is-active { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="training"].is-active { background-color: #751a3b; border-color: #751a3b; color: var(--ci-color-white); }
/* Per-button hover colours — pointer devices only */
@media (hover: hover) and (pointer: fine) {
.cpd-filter__btn[data-filter="all"]:hover { background-color: var(--ci-color-innovate); border-color: var(--ci-color-innovate); color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="webinar"]:hover { background-color: #c6a54e; border-color: #c6a54e; color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="support"]:hover { background-color: #253d47; border-color: #253d47; color: var(--ci-color-white); }
.cpd-filter__btn[data-filter="training"]:hover { background-color: #751a3b; border-color: #751a3b; color: var(--ci-color-white); }
}
/* ── Card grid ── */
.cpd-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 1.5rem;
}
/* ── Card ── */
.cpd-card {
display: flex;
flex-direction: column;
border: 1px solid var(--ci-color-border);
border-radius: 16px;
overflow: hidden;
background-color: var(--ci-color-white);
transition: box-shadow 0.2s ease;
text-decoration: none;
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
.cpd-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-decoration: none;
}
}
.cpd-card.is-hidden {
display: none;
}
/* ── Card thumbnail ── */
.cpd-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--ci-color-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cpd-card__image span {
font-family: var(--ci-font-primary);
font-size: 0.78rem;
font-weight: 400;
color: #aaaaaa;
}
/* ── Card body ── */
.cpd-card__body {
padding: 1.1rem 1.25rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
/* ── Type tag ── */
.cpd-card__tag {
font-family: var(--ci-font-primary);
font-size: 0.68rem;
font-weight: 700;
border-radius: 9999px;
padding: 0.2rem 0.65rem;
color: #fff;
white-space: nowrap;
align-self: flex-start;
}
.cpd-card__tag--webinar { background-color: #c6a54e; }
.cpd-card__tag--support { background-color: #253d47; }
.cpd-card__tag--training { background-color: #751a3b; }
/* ── Card title ── */
.cpd-card__title {
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 700;
color: var(--ci-color-navy);
line-height: 1.3;
margin: 0;
}
/* ── Tablet ── */
@media (max-width: 900px) {
.cpd-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
gap: 1.25rem;
}
}
/* ── Mobile ── */
@media (max-width: 600px) {
.cpd-content {
padding-bottom: var(--ci-section-padding-mobile);
}
.cpd-grid {
grid-template-columns: 1fr;
grid-auto-rows: 220px;
}
.cpd-grid .cpd-card {
height: 100%;
}
.cpd-filter {
gap: 0.4rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD CARD GRID — extended styles
═══════════════════════════════════════════════════════════════════════════ */
/* ── White spacer between intro split and card grid ── */
.cpd-section-spacer {
background-color: #ffffff;
height: 0.3rem;
}
/* ── Grid section wrapper ── */
.cpd-grid-section {
background-color: #253d47;
padding: 5rem 0 6rem;
}
/* ── Section header ── */
.cpd-grid-hd {
text-align: center;
max-width: 580px;
margin: 0 auto 2.75rem;
}
.cpd-grid-hd__title {
font-family: var(--ci-font-primary);
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 0.75rem;
line-height: 1.2;
}
.cpd-grid-hd__sub {
font-family: var(--ci-font-primary);
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
line-height: 1.65;
}
/* ── Gold top accent ── */
.cpd-card {
border-top: 4px solid #c6a54e;
align-items: stretch;
}
/* ── Hide image area (no images yet) ── */
.cpd-card .cpd-card__image {
display: none;
}
/* ── Card meta: duration + audience ── */
.cpd-card__meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.cpd-card__duration {
font-family: var(--ci-font-primary);
font-size: 0.7rem;
font-weight: 700;
color: #c6a54e;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cpd-card__audience {
font-family: var(--ci-font-primary);
font-size: 0.75rem;
color: #999;
line-height: 1.4;
}
/* ── 3-line clamped excerpt ── */
.cpd-card__excerpt {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
color: #555;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
flex: 1;
}
/* ── Aims / Outcomes two-column layout ── */
.cpd-card__lists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cpd-card__list-heading {
font-family: var(--ci-font-primary);
font-size: 0.67rem;
font-weight: 700;
color: #253d47;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.5rem;
}
.cpd-card__aim-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cpd-card__aim-list li {
font-family: var(--ci-font-primary);
font-size: 0.78rem;
color: #555;
line-height: 1.5;
padding-left: 1.1em;
position: relative;
}
.cpd-card__aim-list li::before {
content: '•';
position: absolute;
left: 0;
color: #253d47;
}
.cpd-card__tick-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cpd-card__tick-list li {
font-family: var(--ci-font-primary);
font-size: 0.78rem;
color: #555;
line-height: 1.5;
padding-left: 1.25em;
position: relative;
}
.cpd-card__tick-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #c6a54e;
font-weight: 700;
}
/* ── CTA button in detail ── */
.cpd-card__cta {
align-self: flex-start;
font-size: 0.82rem !important;
padding: 0.6rem 1.35rem !important;
}
/* ── Bespoke tag colour ── */
.cpd-card__tag--bespoke {
background-color: #253d47;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.cpd-card__lists {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
@media (max-width: 600px) {
.cpd-grid-section {
padding: 3rem 0 4rem;
}
.cpd-grid-hd__title {
font-size: 1.5rem;
}
}
/* ── Card: clickable state ── */
.cpd-card {
cursor: pointer;
}
.cpd-card:focus {
outline: none;
}
.cpd-card:focus-visible {
outline: 3px solid #c6a54e;
outline-offset: 3px;
}
/* ── Card view-details link ── */
.cpd-card__view-link {
display: block;
font-family: var(--ci-font-primary);
font-size: 0.82rem;
font-weight: 700;
color: #253d47;
margin-top: 1rem;
padding-top: 0.65rem;
border-top: 1px solid #e8e5e0;
transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.cpd-card:hover .cpd-card__view-link {
color: #c6a54e;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD MODAL
═══════════════════════════════════════════════════════════════════════════ */
.cpd-modal-open {
overflow: hidden;
position: fixed;
width: 100%;
left: 0;
}
.cpd-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.cpd-modal[hidden] {
display: none;
}
/* ── Backdrop ── */
.cpd-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(37, 61, 71, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ── Panel ── */
.cpd-modal__panel {
position: relative;
background: #ffffff;
border-radius: 20px;
border-top: none;
max-width: 700px;
width: 100%;
max-height: 88vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
animation: cpd-modal-in 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
/* ── Inner scroll container — keeps scrollbar inside the rounded panel ── */
.cpd-modal__scroll {
overflow-y: auto;
flex: 1;
min-height: 0;
padding: 2.5rem 2.75rem 2.75rem;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
/* Webkit/Blink custom scrollbar — thin, subtle, inside the curves */
.cpd-modal__scroll::-webkit-scrollbar {
width: 6px;
}
.cpd-modal__scroll::-webkit-scrollbar-track {
background: transparent;
margin-block: 20px; /* keeps track away from top/bottom rounded corners */
}
.cpd-modal__scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
.cpd-modal__scroll::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.32);
}
}
@keyframes cpd-modal-in {
from {
opacity: 0;
transform: translateY(20px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ── Close button ── */
.cpd-modal__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f2f1ef;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #555;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.cpd-modal__close:hover {
background: #253d47;
color: #ffffff;
}
}
/* ── Modal header ── */
.cpd-modal__header {
margin-bottom: 1.5rem;
}
.cpd-modal__tag {
display: none;
}
.cpd-modal__title {
font-family: var(--ci-font-primary);
font-size: 1.5rem;
font-weight: 700;
color: #253d47;
line-height: 1.25;
margin: 0 0 0.85rem;
}
.cpd-modal__meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cpd-modal__duration {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
font-weight: 400;
color: #555;
text-transform: none;
letter-spacing: 0;
}
.cpd-modal__duration::before {
content: 'Duration: ';
font-weight: 700;
color: #253d47;
}
.cpd-modal__audience {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
color: #555;
}
.cpd-modal__audience::before {
content: 'Suitable for: ';
font-weight: 700;
color: #253d47;
}
/* ── Overview ── */
.cpd-modal__overview {
font-family: var(--ci-font-primary);
font-size: 1rem;
color: #444;
line-height: 1.7;
margin: 0 0 1.75rem;
}
/* ── Aims / Outcomes ── */
.cpd-modal__lists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.cpd-modal__list-heading {
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 700;
color: #253d47;
text-transform: none;
letter-spacing: 0;
margin: 0 0 0.65rem;
}
.cpd-modal__aim-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.cpd-modal__aim-list li {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
color: #555;
line-height: 1.5;
padding-left: 1.1em;
position: relative;
}
.cpd-modal__aim-list li::before {
content: '•';
position: absolute;
left: 0;
color: #253d47;
}
.cpd-modal__tick-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.cpd-modal__tick-list li {
font-family: var(--ci-font-primary);
font-size: 0.875rem;
color: #555;
line-height: 1.5;
padding-left: 1.4em;
position: relative;
}
.cpd-modal__tick-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #c6a54e;
font-weight: 700;
}
/* ── Modal CTA ── */
.cpd-modal__cta {
display: inline-block;
}
/* ── Responsive ── */
@media (max-width: 600px) {
.cpd-modal {
padding: 0;
align-items: flex-end;
}
.cpd-modal__panel {
border-radius: 24px 24px 0 0;
max-height: 80vh;
}
.cpd-modal__scroll {
padding: 2.75rem 1.5rem 2.5rem;
}
/* iOS-style drag handle — sits in the top padding area above the title */
.cpd-modal__panel::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: rgba(0, 0, 0, 0.12);
border-radius: 2px;
position: absolute;
top: 0.65rem;
left: 50%;
transform: translateX(-50%);
}
/* Push close button down so it clears the drag handle */
.cpd-modal__close {
top: 1.5rem;
right: 1rem;
}
.cpd-modal__lists {
grid-template-columns: 1fr;
}
.cpd-modal__title {
font-size: 1.25rem;
padding-right: 2.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD CARD — WHITE CARD REDESIGN
═══════════════════════════════════════════════════════════════════════════ */
/* Card — liquid glass on navy background */
.cpd-card {
position: relative;
overflow: hidden;
border: none;
border-top: none;
border-radius: 20px;
height: 100%;
background: rgba(180, 180, 180, 0.22);
backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(0.95);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.40);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cpd-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
z-index: 0;
}
.cpd-card > * {
position: relative;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.cpd-card:hover {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
}
/* Card body — generous padding, flex column so button pins to bottom */
.cpd-card .cpd-card__body {
padding: 2rem 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
}
/* Hide tag, meta and excerpt — title + CTA only */
.cpd-card .cpd-card__tag { display: none; }
.cpd-card .cpd-card__excerpt { display: none; }
.cpd-card .cpd-card__meta { display: none; }
/* Title — white, left-aligned, natural height */
.cpd-card .cpd-card__title {
color: #ffffff;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
margin: 0 0 1.25rem;
text-align: left;
padding-bottom: 0;
border-bottom: none;
flex: 0 0 auto;
}
/* View details — glass-friendly gold pill button, pinned to bottom */
.cpd-card .cpd-card__view-link {
display: inline-block;
font-family: var(--ci-font-primary);
font-size: 0.9rem;
font-weight: 700;
color: #ffffff;
background-color: #c6a54e;
border: none;
border-radius: 9999px;
padding: 0.8rem 1.75rem;
text-align: center;
text-decoration: none;
letter-spacing: 0.01em;
transition: background-color 0.2s ease, transform 0.2s ease;
align-self: flex-start;
margin-top: auto;
}
.cpd-card .cpd-card__view-link::after {
content: none;
}
@media (hover: hover) and (pointer: fine) {
.cpd-card:hover .cpd-card__view-link {
background-color: #b8943f;
color: #ffffff;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CPD PAGE — CTA SECTION
═══════════════════════════════════════════════════════════════════════════ */
.cpd-cta {
padding: var(--ci-section-padding) 0;
background-color: #751a3b;
text-align: center;
border-top: 0.3rem solid #ffffff;
}
.cpd-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: #ffffff;
margin: 0 auto 1.25rem;
max-width: 720px;
}
.cpd-cta__body {
font-family: var(--ci-font-primary);
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
margin: 0 auto 2.25rem;
}
.cpd-cta .ci-btn {
background-color: #ffffff;
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.cpd-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.90);
}
}
/* ── Mobile ── */
@media (max-width: 767px) {
.cpd-cta {
padding: var(--ci-section-padding-mobile) 0;
text-align: left;
}
.cpd-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.cpd-cta__body {
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CURRICULUM PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.curriculum-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.curriculum-hero__content {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.curriculum-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0;
}
.curriculum-hero__intro p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.curriculum-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.curriculum-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.curriculum-hero__content {
gap: 1.25rem;
}
.curriculum-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.curriculum-hero__intro p {
font-size: 0.975rem;
line-height: 1.75;
margin-bottom: 1rem;
}
}
/* ─── Shared glass card base ─────────────────────────────────────────────────
The rules on .curriculum-testimonial__card, ::before, ::after, and > * below
are identical across design-testimonial.css, different-testimonial.css, and
curriculum-testimonial.css. If a new enqueue is ever added for a shared
partial, extract these there. Until then keep them in sync manually.
─────────────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
CURRICULUM PAGE — SINGLE TESTIMONIAL
═══════════════════════════════════════════════════════════════════════════ */
.curriculum-testimonial {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
/* Single card — same grey frosted glass as home page, adapted for white bg */
.curriculum-testimonial__card {
max-width: 720px;
margin: 0 auto !important;
border-radius: 24px;
overflow: hidden;
position: relative;
/* Slightly brighter than home cards — white bg needs more lift */
background: rgba(210, 210, 210, 0.30);
backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
/* Border visible on white (not white-on-white) */
border: 1px solid rgba(0, 0, 0, 0.08);
/* Shadow needs more weight to lift off a white bg */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
/* Same faint top-left sheen as home cards */
.curriculum-testimonial__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
z-index: 0;
}
.curriculum-testimonial__card::after { display: none; }
.curriculum-testimonial__card > * {
position: relative;
z-index: 1;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.curriculum-testimonial {
padding: var(--ci-section-padding-mobile) 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CURRICULUM PAGE — CTA SECTION
═══════════════════════════════════════════════════════════════════════════ */
.curriculum-cta {
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.curriculum-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 1.25rem;
max-width: 720px;
}
.curriculum-cta__body {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
margin: 0 auto 2.25rem;
}
.curriculum-cta__btn {
margin: 0 auto 2rem;
display: block;
width: fit-content;
}
/* Links on one line, centred */
.curriculum-cta__links {
list-style: none;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
gap: 2.5rem;
}
.curriculum-cta__link {
font-size: 0.95rem;
font-weight: 600;
color: var(--ci-color-white);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: opacity 0.15s ease;
}
.curriculum-cta__link::after {
content: '›';
font-size: 1.2em;
line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
.curriculum-cta__link:hover {
opacity: 0.7;
}
}
/* ── Mobile ── */
@media (max-width: 767px) {
.curriculum-cta {
padding: 2rem 0;
text-align: left;
}
.curriculum-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.curriculum-cta__body {
font-size: 0.975rem;
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
.curriculum-cta__btn {
display: inline-block;
width: auto;
margin-left: 0;
margin-bottom: 1.5rem;
}
.curriculum-cta__links {
flex-direction: column;
justify-content: flex-start;
gap: 0.75rem;
}
}
/* ── White button on burgundy background ── */
.curriculum-cta .ci-btn {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.curriculum-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.design-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
background-size: cover;
background-position: center;
}
.design-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 2rem;
}
/* Second sentence — slightly smaller, same colour */
.design-hero__heading-sub {
display: block;
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-weight: 400;
margin-top: 0.4rem;
line-height: 1.3;
}
.design-hero__intro p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.design-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.design-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.design-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.design-hero__heading-sub {
font-size: clamp(1rem, 4vw, 1.3rem);
}
.design-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ─── Shared glass card base ─────────────────────────────────────────────────
The rules on .design-testimonial__card, ::before, ::after, and > * below
are identical across design-testimonial.css, different-testimonial.css, and
curriculum-testimonial.css. If a new enqueue is ever added for a shared
partial, extract these there. Until then keep them in sync manually.
─────────────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN PAGE — SINGLE TESTIMONIAL
═══════════════════════════════════════════════════════════════════════════ */
.design-testimonial {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.design-testimonial__card {
max-width: 720px;
margin: 0 auto !important;
border-radius: 24px;
overflow: hidden;
position: relative;
background: rgba(210, 210, 210, 0.30);
backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.design-testimonial__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
z-index: 0;
}
.design-testimonial__card::after { display: none; }
.design-testimonial__card > * {
position: relative;
z-index: 1;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.design-testimonial {
padding: var(--ci-section-padding-mobile) 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN COMPARISON TABLE
3-column feature comparison: Feature | Cornerstones | Other providers
═══════════════════════════════════════════════════════════════════════════ */
.design-comparison {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-off-white);
}
/* ── Section header ── */
.design-comparison__header {
text-align: center;
margin-bottom: 3rem;
}
.design-comparison__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.75rem, 2.5vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: #253d47;
margin: 0;
}
/* ── Table wrapper — constrained width, overflow for mobile ── */
.design-comparison__table-wrap {
max-width: 740px;
margin: 0 auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
/* ── Table base ── */
.design-comparison__table {
width: 100%;
border-collapse: collapse;
font-family: var(--ci-font-primary);
background-color: var(--ci-color-white);
min-width: 420px;
}
/* ── Header row ── */
.design-comparison__table thead th {
padding: 1rem 1.25rem;
font-family: var(--ci-font-primary);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
text-align: center;
}
.design-comparison__col-feature {
text-align: left !important;
width: 58%;
background-color: var(--ci-color-off-white);
color: var(--ci-color-navy);
}
.design-comparison__col-ci {
width: 21%;
background-color: #c6a54e;
color: #fff;
}
.design-comparison__col-other {
width: 21%;
background-color: #e8e8ed;
color: var(--ci-color-navy);
}
/* Cornerstones column header label */
.design-comparison__brand {
color: var(--ci-color-white);
}
/* ── Body rows ── */
.design-comparison__table tbody tr {
border-bottom: 1px solid var(--ci-color-border);
transition: background-color 0.15s ease;
}
.design-comparison__table tbody tr:last-child {
border-bottom: none;
}
@media (hover: hover) and (pointer: fine) {
.design-comparison__table tbody tr:hover {
background-color: #f7f7f9;
}
}
.design-comparison__table tbody td {
padding: 0.85rem 1.25rem;
font-size: 0.92rem;
color: var(--ci-color-text);
line-height: 1.5;
text-align: center;
}
.design-comparison__table tbody td:first-child {
text-align: left;
color: var(--ci-color-navy);
font-weight: 500;
}
/* Cornerstones column body highlight */
.design-comparison__table tbody td:nth-child(2) {
background-color: rgba(198, 165, 78, 0.1);
}
/* ── Tick & cross icons ── */
.design-comparison__tick,
.design-comparison__cross {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
}
/* Ticks — bright green */
.design-comparison__tick {
background-color: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
/* Crosses — dark red */
.design-comparison__cross {
background-color: rgba(185, 28, 28, 0.1);
color: #b91c1c;
}
/* Cell background tints by result type */
.design-comparison__table td:has(.design-comparison__cross) {
background-color: rgba(185, 28, 28, 0.06);
}
.design-comparison__table td:has(.design-comparison__tick) {
background-color: rgba(34, 197, 94, 0.06);
}
.design-comparison__table td:has(.design-comparison__limited) {
background-color: rgba(198, 165, 78, 0.08);
}
/* Limited — amber */
.design-comparison__limited {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: #92620a;
background-color: rgba(198, 165, 78, 0.15);
border-radius: 9999px;
padding: 0.2rem 0.65rem;
}
/* "View more" chip — shown inline after the feature text */
.design-comparison__row-hint {
display: inline-block;
margin-left: 0.5rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #c6a54e;
opacity: 0;
transition: opacity 0.15s ease;
vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
.design-comparison__row:hover .design-comparison__row-hint {
opacity: 1;
}
}
/* ── Lightbox ── */
.ci-lightbox {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.ci-lightbox.is-open {
opacity: 1;
pointer-events: all;
}
.ci-lightbox__backdrop {
position: absolute;
inset: 0;
background-color: rgba(15, 25, 40, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.ci-lightbox__container {
position: relative;
z-index: 1;
background: var(--ci-color-white);
border-radius: 16px;
width: min(680px, 92vw);
overflow: hidden;
transform: translateY(12px) scale(0.98);
transition: transform 0.28s ease, opacity 0.28s ease;
opacity: 0;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.ci-lightbox.is-open .ci-lightbox__container {
transform: translateY(0) scale(1);
opacity: 1;
}
.ci-lightbox__close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
color: var(--ci-color-navy);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.ci-lightbox__close:hover {
background: rgba(0, 0, 0, 0.15);
}
}
.ci-lightbox__close svg {
width: 16px;
height: 16px;
}
/* Image / placeholder area */
.ci-lightbox__image-wrap {
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--ci-color-off-white);
display: flex;
align-items: center;
justify-content: center;
}
.ci-lightbox__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: #b0b0b8;
}
.ci-lightbox__placeholder-icon {
width: 52px;
height: 52px;
color: #c8c8d0;
}
.ci-lightbox__placeholder-text {
font-family: var(--ci-font-primary);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #c0c0c8;
margin: 0;
}
/* Caption */
.ci-lightbox__caption {
font-family: var(--ci-font-primary);
font-size: 0.92rem;
font-weight: 500;
color: var(--ci-color-navy);
margin: 0;
padding: 1rem 1.5rem 1.25rem;
line-height: 1.5;
}
/* ── Mobile — centre Feature heading ── */
@media (max-width: 768px) {
.design-comparison__col-feature {
text-align: center !important;
}
}
/* ── Mobile — compact 3-column ── */
@media (max-width: 600px) {
.design-comparison {
padding: var(--ci-section-padding-mobile) 0;
}
.design-comparison__header {
margin-bottom: 2rem;
}
.design-comparison__table-wrap {
border-radius: 12px;
}
/* Remove min-width so table fits the screen */
.design-comparison__table {
min-width: 0;
table-layout: fixed;
width: 100%;
}
/* Feature gets remaining width, icon columns are equal and fixed */
.design-comparison__col-feature { width: auto; }
.design-comparison__col-ci { width: 76px; }
.design-comparison__col-other { width: 76px; }
/* Header cells — small, centred, wrap onto two lines */
.design-comparison__table thead th {
padding: 0.6rem 0.25rem;
font-size: 0.65rem;
line-height: 1.3;
}
.design-comparison__col-feature {
padding-left: 0.75rem;
}
/* Body cells */
.design-comparison__table tbody td {
padding: 0.75rem 0.25rem;
font-size: 0.82rem;
word-break: break-word;
hyphens: auto;
}
.design-comparison__table tbody td:first-child {
padding-left: 0.75rem;
padding-right: 0.5rem;
}
/* "View more" — always visible on mobile, shown on its own line */
.design-comparison__row-hint {
display: block;
opacity: 1;
margin: 0.35rem 0 0;
font-size: 0.72rem;
color: #c6a54e;
font-weight: 600;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN PAGE — CTA
═══════════════════════════════════════════════════════════════════════════ */
.design-cta {
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.design-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 1.25rem;
max-width: 720px;
}
.design-cta__body {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
margin: 0 auto 2.25rem;
}
.design-cta__btn {
display: inline-block;
margin: 0 auto;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.design-cta {
padding: 2rem 0;
text-align: left;
}
.design-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.design-cta__body {
font-size: 0.975rem;
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
.design-cta__btn {
display: inline-block;
margin-left: 0;
}
}
/* ── White button on burgundy background ── */
.design-cta .ci-btn {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.design-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DIFFERENT BY DESIGN PAGE — HERO
═══════════════════════════════════════════════════════════════════════════ */
.different-hero {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
background-size: cover;
background-position: center;
}
.different-hero__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.2;
color: #c6a54e;
margin: 0 0 2rem;
}
.different-hero__heading-sub {
display: block;
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-weight: 400;
margin-top: 0.4rem;
line-height: 1.3;
}
.different-hero__intro p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ci-color-text);
margin: 0 0 1.25rem;
}
.different-hero__intro p:last-child {
margin-bottom: 0;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.different-hero {
padding: var(--ci-section-padding-mobile) 0;
}
.different-hero__heading {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 1.25rem;
}
.different-hero__heading-sub {
font-size: clamp(1rem, 4vw, 1.3rem);
}
.different-hero__intro p {
font-size: 0.975rem;
line-height: 1.7;
margin-bottom: 0.75rem;
}
}
/* ─── Shared glass card base ─────────────────────────────────────────────────
The rules on .different-testimonial__card, ::before, ::after, and > * below
are identical across design-testimonial.css, different-testimonial.css, and
curriculum-testimonial.css. If a new enqueue is ever added for a shared
partial, extract these there. Until then keep them in sync manually.
─────────────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
DIFFERENT BY DESIGN PAGE — TESTIMONIAL
═══════════════════════════════════════════════════════════════════════════ */
.different-testimonial {
padding: var(--ci-section-padding) 0;
background-color: var(--ci-color-white);
}
.different-testimonial__card {
max-width: 720px;
margin: 0 auto !important;
border-radius: 24px;
overflow: hidden;
position: relative;
background: rgba(210, 210, 210, 0.30);
backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
-webkit-backdrop-filter: blur(24px) saturate(80%) brightness(1.05);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.different-testimonial__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.00) 50%
);
pointer-events: none;
z-index: 0;
}
.different-testimonial__card::after { display: none; }
.different-testimonial__card > * {
position: relative;
z-index: 1;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.different-testimonial {
padding: var(--ci-section-padding-mobile) 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DIFFERENT BY DESIGN PAGE — CTA
═══════════════════════════════════════════════════════════════════════════ */
.different-cta {
padding: 3rem 0;
background-color: #751a3b;
text-align: center;
}
.different-cta__heading {
font-family: var(--ci-font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
color: var(--ci-color-white);
margin: 0 auto 1.25rem;
max-width: 720px;
}
.different-cta__body {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
margin: 0 auto 2.25rem;
}
.different-cta__btn {
display: inline-block;
margin: 0 auto;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.different-cta {
padding: 2rem 0;
text-align: left;
}
.different-cta__heading {
font-size: clamp(1.3rem, 5vw, 1.8rem);
margin-left: 0;
margin-right: 0;
}
.different-cta__body {
font-size: 0.975rem;
margin-left: 0;
margin-right: 0;
max-width: 100%;
margin-bottom: 1.75rem;
}
.different-cta__btn {
display: inline-block;
margin-left: 0;
}
}
/* ── White button on burgundy background ── */
.different-cta .ci-btn {
background-color: var(--ci-color-white);
color: #751a3b;
}
@media (hover: hover) and (pointer: fine) {
.different-cta .ci-btn:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ENQUIRE PAGE
Ultra-premium two-panel layout: context left, form right.
═══════════════════════════════════════════════════════════════════════════ */
.enquire-content {
min-height: calc(100vh - 72px);
display: flex;
align-items: stretch;
}
/* ── Two-panel grid ── */
.enquire-content__layout {
display: grid;
grid-template-columns: 45fr 55fr;
width: 100%;
}
/* ── Left panel ── */
.enquire-content__left {
background-color: #253d47;
display: flex;
align-items: center;
padding: 1.875rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 1.875rem max(2rem, calc((100vw - 1280px) / 2 + 2rem));
padding-right: 4rem;
}
.enquire-content__left-inner {
max-width: 440px;
}
.enquire-content__eyebrow {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 1.25rem;
}
.enquire-content__heading {
font-family: var(--ci-font-primary);
font-size: clamp(2.5rem, 3.5vw, 3.75rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: #c6a54e;
margin: 0 0 1.25rem;
}
.enquire-content__intro {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 3rem;
}
/* ── Steps ── */
.enquire-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.enquire-step {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.enquire-step__num {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #c6a54e;
padding-top: 0.15rem;
flex-shrink: 0;
width: 1.75rem;
}
.enquire-step__text {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
font-weight: 500;
}
/* ── Right panel ── */
.enquire-content__right {
background-color: var(--ci-color-white);
display: flex;
align-items: center;
padding: 1.875rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 1.875rem 4rem;
}
.enquire-content__right-inner {
width: 100%;
max-width: 520px;
}
/* ── Form layout ── */
.enquire-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.enquire-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* ── Individual field ── */
.enquire-field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.enquire-field__label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ci-color-navy);
}
/* ── Inputs & selects ── */
.enquire-field__input,
.enquire-field__select {
width: 100%;
padding: 0.8rem 1rem;
border: 1.5px solid #d2d2d7;
border-radius: 12px;
font-family: var(--ci-font-primary);
font-size: 0.95rem;
color: var(--ci-color-text);
background-color: var(--ci-color-white);
appearance: none;
-webkit-appearance: none;
outline: none;
box-sizing: border-box;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.enquire-field__textarea {
width: 100%;
padding: 0.8rem 1rem;
border: 1.5px solid #d2d2d7;
border-radius: 12px;
font-family: var(--ci-font-primary);
font-size: 0.95rem;
color: var(--ci-color-text);
background-color: var(--ci-color-white);
outline: none;
box-sizing: border-box;
resize: vertical;
min-height: 110px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
line-height: 1.6;
}
.enquire-field__textarea--small {
min-height: 80px;
resize: none;
}
.enquire-field__textarea:focus {
border-color: var(--ci-color-innovate);
box-shadow: 0 0 0 4px rgba(83, 141, 169, 0.12);
}
.enquire-field__input::placeholder {
color: #b0b0b8;
}
.enquire-field__input:focus,
.enquire-field__select:focus {
border-color: var(--ci-color-innovate);
box-shadow: 0 0 0 4px rgba(83, 141, 169, 0.12);
}
/* Custom select arrow */
.enquire-field__select-wrap {
position: relative;
}
.enquire-field__select-wrap::after {
content: '';
position: absolute;
right: 1rem;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid #6e6e73;
border-bottom: 1.5px solid #6e6e73;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.enquire-field__select {
padding-right: 2.5rem;
cursor: pointer;
}
.enquire-field__select option[value=""] {
color: #b0b0b8;
}
/* ── Phone reveal wrapper ── */
.enquire-phone-wrapper {
display: grid;
grid-template-rows: 0fr;
margin-top: -1.25rem;
transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
}
.enquire-phone-wrapper.is-visible {
grid-template-rows: 1fr;
margin-top: 0;
}
.enquire-field--phone {
overflow: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}
.enquire-phone-wrapper.is-visible .enquire-field--phone {
opacity: 1;
transition: opacity 0.2s ease 0.15s;
}
/* ── Connected phone input (prefix + number) ── */
.enquire-field__phone-wrap {
display: flex;
border: 1.5px solid #d2d2d7;
border-radius: 12px;
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.enquire-field__phone-wrap:focus-within {
border-color: var(--ci-color-innovate);
box-shadow: 0 0 0 4px rgba(83, 141, 169, 0.12);
}
.enquire-field__prefix-wrap {
position: relative;
border-right: 1.5px solid #d2d2d7;
flex-shrink: 0;
}
/* Visible display — the styled text the user sees.
Sized to comfortably hold "+44" plus the chevron gap. */
.enquire-field__prefix-display {
display: block;
padding: 0.8rem 2.25rem 0.8rem 1rem;
font-family: var(--ci-font-primary);
font-size: 0.95rem;
color: var(--ci-color-text);
background: var(--ci-color-off-white);
white-space: nowrap;
user-select: none;
min-width: 3.5rem; /* enough for "+44" */
}
/* The real