/* ==========================================================================
CORPORATE SUPPLIER FRAMEWORK — style.css
--------------------------------------------------------------------------
Structure of this file:
01. Design tokens (edit these to rebrand the whole site)
02. Reset & base
03. Typography
04. Layout primitives (container, grid, section)
05. Components (buttons, cards, badges, forms, accordion)
06. Header & navigation
07. Sections (hero, cta strip, stats, about, products, partners,
process, contact band, page hero)
08. Footer
09. Motion / reveal
10. Responsive
========================================================================== */
/* ==========================================================================
01. DESIGN TOKENS
Change a value here and it propagates everywhere. This is your brand panel.
========================================================================== */
:root {
/* --- Brand colour ------------------------------------------------------
Crest Gate Trading: deep navy from the business profile, with the
gold accent used for emphasis and primary calls to action. */
--brand: #0A2C4E; /* primary navy — buttons, links, icons */
--brand-900: #05203B; /* deepest navy — dark sections, hero */
--brand-700: #072741;
--brand-600: #0E3A66;
--brand-400: #1653A5; /* mid blue from the logo */
--brand-200: #A9C4E2;
--brand-100: #DCE7F3;
--brand-050: #F1F6FB;
/* --- Accent (gold) — emphasis, primary CTA, eyebrows ------------------ */
--accent: #FCB315;
--accent-600: #E4A00B;
--accent-100: #FFF0CE;
--accent-050: #FFF8E9;
/* --- Neutrals ---------------------------------------------------------- */
--ink: #0B1D30; /* headings */
--body: #48566B; /* paragraph text */
--muted: #7B8798; /* captions, labels, meta */
--line: #E2E8F0; /* borders & dividers */
--surface: #F1F6FB; /* tinted section background */
--surface-2: #F6F8FA; /* neutral section background */
--white: #FFFFFF;
--dark: #05203B; /* dark section background */
/* --- Typography --------------------------------------------------------
Poppins matches the geometric sans used in the business profile.
Swap these two lines and the in each to change them. */
--font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
/* Fluid type scale — min size at 360px, max size at 1440px viewport */
--fs-eyebrow: 0.8125rem;
--fs-small: 0.875rem;
--fs-body: 1rem;
--fs-lead: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
--fs-h5: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
--fs-h4: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
--fs-h3: clamp(1.375rem, 1.20rem + 0.75vw, 1.875rem);
--fs-h2: clamp(1.75rem, 1.40rem + 1.55vw, 3rem);
--fs-h1: clamp(2rem, 1.62rem + 1.70vw, 3.25rem);
--fs-display: clamp(2.25rem, 1.75rem + 2.20vw, 3.875rem);
--lh-tight: 1.12;
--lh-heading: 1.22;
--lh-body: 1.7;
/* --- Spacing scale ----------------------------------------------------- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
--section-y: clamp(4rem, 8vw, 7.5rem); /* vertical rhythm of a section */
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--container: 1200px;
--container-wide: 1360px;
/* --- Radii ------------------------------------------------------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--r-pill: 999px;
/* Signature asymmetric crop used on feature imagery */
--r-blob: var(--r-lg) var(--r-lg) var(--r-lg) clamp(60px, 16vw, 180px);
/* --- Elevation --------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(16, 19, 34, .06);
--shadow-sm: 0 4px 16px rgba(16, 19, 34, .06);
--shadow-md: 0 12px 32px rgba(16, 19, 34, .08);
--shadow-lg: 0 28px 70px rgba(16, 19, 34, .12);
--shadow-brand: 0 18px 55px rgba(5, 32, 59, .28);
--shadow-gold: 0 16px 40px rgba(252, 179, 21, .35);
/* --- Motion ------------------------------------------------------------ */
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-fast: .18s;
--dur: .32s;
--dur-slow: .6s;
--header-h: 84px;
}
/* ==========================================================================
02. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--body);
background: var(--white);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-700); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--brand-400);
outline-offset: 3px;
border-radius: var(--r-xs);
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--brand); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
03. TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--ink);
margin: 0 0 var(--sp-4);
line-height: var(--lh-heading);
font-weight: 700;
letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
h5 { font-size: var(--fs-h5); letter-spacing: 0; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
.eyebrow {
display: inline-flex; align-items: center;
font-family: var(--font-heading);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: .06em;
color: var(--brand);
margin: 0 0 var(--sp-3);
}
/* No decorative rule before the label. */
.lead { font-size: var(--fs-lead); color: var(--body); }
.text-muted { color: var(--muted); }
.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--muted); font-size: var(--fs-lead); }
/* Light text variant, used on dark / brand backgrounds */
.on-dark, .on-dark p { color: rgba(255, 255, 255, .78); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: #fff; }
.on-dark .eyebrow { color: rgba(255, 255, 255, .72); }
/* ==========================================================================
04. LAYOUT PRIMITIVES
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--surface { background: var(--surface); }
.section--neutral { background: var(--surface-2); }
.section--dark { background: var(--dark); }
.section--brand { background: var(--brand); }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* ==========================================================================
05. COMPONENTS
========================================================================== */
/* --- Buttons ------------------------------------------------------------ */
.btn {
--btn-bg: var(--brand);
--btn-fg: #fff;
--btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
padding: 1rem 2rem;
border-radius: var(--r-pill);
border: 1.5px solid var(--btn-bd);
background: var(--btn-bg);
color: var(--btn-fg);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease),
background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--line); }
.btn--outline:hover { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--brand); }
.btn--light:hover { box-shadow: 0 18px 45px rgba(0, 0, 0, .22); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .4); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--brand); --btn-bd: #fff; }
.btn--sm { padding: .72rem 1.5rem; font-size: .9375rem; }
.btn--block { width: 100%; }
/* Text link with arrow */
.link-arrow {
display: inline-flex; align-items: center; gap: .45rem;
font-family: var(--font-heading); font-weight: 700; font-size: .9375rem;
letter-spacing: .01em; color: var(--brand);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
/* --- Cards -------------------------------------------------------------- */
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.5rem, 3vw, 2.25rem);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Product / service card */
.product-card { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.product-card .icon-badge { margin-bottom: var(--sp-2); }
.product-card h4 { margin: 0; }
.product-card p { color: var(--muted); font-size: var(--fs-small); margin: 0; flex: 1; }
.product-card .link-arrow { margin-top: var(--sp-3); }
/* Icon badge — holds an inline SVG icon */
.icon-badge {
display: inline-grid; place-items: center;
width: 76px; height: 76px;
border-radius: var(--r-md);
background: var(--brand-050);
color: var(--brand);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.icon-badge svg { width: 38px; height: 38px; stroke-width: 1.5; }
.card:hover .icon-badge,
.cap-card:hover .icon-badge { transform: translateY(-2px) scale(1.04); }
.card:hover .icon-badge { background: var(--brand); color: #fff; }
.icon-badge--accent { background: var(--accent-050); color: var(--accent); }
/* Feature checklist */
.checklist { display: grid; gap: var(--sp-3); }
.checklist li {
display: grid; grid-template-columns: 24px 1fr; gap: .85rem; align-items: start;
color: var(--body);
}
.checklist li::before {
content: ""; margin-top: .35rem;
width: 22px; height: 22px; border-radius: 50%;
background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2C4E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checklist strong { display: block; color: var(--ink); font-family: var(--font-heading); }
/* Quote / testimonial card */
.quote-card {
background: var(--brand);
color: #fff;
border-radius: var(--r-lg);
padding: clamp(1.5rem, 3vw, 2rem);
box-shadow: var(--shadow-brand);
max-width: 380px;
}
.quote-card__person { display: flex; align-items: center; gap: .9rem; margin-bottom: var(--sp-4); }
.quote-card__person figcaption { min-width: 0; overflow-wrap: anywhere; }
.quote-card__avatar {
width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none;
border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .15);
}
.quote-card__name { font-family: var(--font-heading); font-weight: 700; color: #fff; }
.quote-card__role { font-size: var(--fs-small); color: rgba(255, 255, 255, .72); }
.quote-card blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: #fff; }
.quote-card blockquote::before { content: "\201C"; }
.quote-card blockquote::after { content: "\201D"; }
/* Stat tile */
.stat { text-align: center; }
.stat__value {
font-family: var(--font-heading); font-weight: 800;
font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
line-height: 1; color: var(--ink); letter-spacing: -0.03em;
}
.stat__value .suffix { color: var(--brand); }
.stat__label {
margin-top: .6rem; font-size: var(--fs-small); color: var(--muted);
letter-spacing: .02em; font-weight: 600;
}
.on-dark .stat__value { color: #fff; }
.on-dark .stat__value .suffix { color: rgba(255, 255, 255, .6); }
.on-dark .stat__label { color: rgba(255, 255, 255, .6); }
/* Step (numbered process item) */
.step { position: relative; padding-top: var(--sp-5); }
.step__num {
font-family: var(--font-heading); font-weight: 800;
font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1;
color: var(--brand-200); letter-spacing: -0.04em;
margin-bottom: var(--sp-2);
}
.step h4 { margin-bottom: var(--sp-2); }
.step p { color: var(--muted); font-size: var(--fs-small); }
.step::after {
content: ""; position: absolute; top: var(--sp-5); right: -1.25rem;
width: 1px; height: 60%; background: var(--line);
}
.step:last-child::after { display: none; }
/* Pill badge */
.pill {
display: inline-flex; align-items: center; gap: .5rem;
padding: .45rem 1rem; border-radius: var(--r-pill);
background: var(--brand-050); color: var(--brand);
font-size: var(--fs-small); font-weight: 600;
}
/* Accordion (products page) */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion__trigger {
width: 100%; display: flex; align-items: center; gap: var(--sp-4);
padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
background: none; border: 0; text-align: left;
font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); color: var(--ink);
}
.accordion__trigger .icon-badge { width: 46px; height: 46px; flex: none; }
.accordion__trigger .icon-badge svg { width: 22px; height: 22px; }
.accordion__title { flex: 1; }
.accordion__chev {
width: 22px; height: 22px; flex: none; color: var(--brand);
transition: transform var(--dur) var(--ease);
}
.accordion[open] .accordion__chev,
.accordion.is-open .accordion__chev { transform: rotate(180deg); }
.accordion__panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--dur) var(--ease);
}
.accordion.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body { padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); color: var(--muted); }
.accordion__body ul { display: grid; gap: .5rem; margin-top: var(--sp-3); }
.accordion__body ul li { display: flex; gap: .6rem; }
.accordion__body ul li::before {
content: ""; margin-top: .55rem; width: 8px; height: 8px; border-radius: 2px;
background: var(--accent); flex: none;
}
/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: .5rem; }
.field label {
font-family: var(--font-heading); font-size: var(--fs-small);
font-weight: 600; color: var(--ink);
}
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
width: 100%;
font: inherit; font-size: var(--fs-body);
color: var(--ink);
padding: .95rem 1.1rem;
background: #fff;
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-100);
}
.field input::placeholder, .field textarea::placeholder { color: #A9B0C2; }
.field .hint { font-size: var(--fs-small); color: var(--muted); }
.field .error { font-size: var(--fs-small); color: #D93838; display: none; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #D93838; }
.field.is-invalid .error { display: block; }
.form__note { font-size: var(--fs-small); color: var(--muted); }
.form__status {
display: none; padding: 1rem 1.25rem; border-radius: var(--r-sm);
background: var(--brand-050); color: var(--brand-700); font-size: var(--fs-small);
}
.form__status.is-visible { display: block; }
.form__status.is-error { background: #FDECEC; color: #9B1C1C; }
.form button[disabled] { opacity: .65; cursor: progress; }
/* --- Contact detail row ------------------------------------------------- */
.contact-row { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4); align-items: start; }
.contact-row + .contact-row { margin-top: var(--sp-5); }
.contact-row .icon-badge { width: 52px; height: 52px; }
.contact-row__label {
font-family: var(--font-heading); font-size: var(--fs-small); font-weight: 700;
letter-spacing: .02em; color: var(--muted); margin-bottom: .25rem;
}
.contact-row__value { color: var(--ink); font-size: var(--fs-lead); }
.contact-row__value a { color: inherit; }
.contact-row__value a:hover { color: var(--brand); }
.on-dark .contact-row__label { color: rgba(255, 255, 255, .55); }
.on-dark .contact-row__value, .on-dark .contact-row__value a { color: #fff; }
.on-dark .contact-row .icon-badge { background: rgba(255, 255, 255, .1); color: #fff; }
/* ==========================================================================
06. HEADER & NAVIGATION
========================================================================== */
.header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
/* Three-column header: nav left, logo centred, actions right.
The logo shrinks when the page is scrolled and stays centred. */
.header {
--logo-mark: 58px;
--logo-word: 26px;
--header-pad-t: .8rem;
--header-pad-b: .8rem;
}
.header.is-stuck {
--logo-mark: 38px;
--logo-word: 17px;
--header-pad-t: .5rem;
--header-pad-b: .5rem;
}
/* One row: logo on the left, then the navigation, phone and call to action. */
.header__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
padding-block: var(--header-pad-t) var(--header-pad-b);
transition: padding var(--dur) var(--ease);
}
.brand {
grid-column: 1;
display: flex; align-items: center; gap: .7rem;
width: fit-content;
}
.header__bar {
grid-column: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sp-5);
}
.header__bar > .nav { grid-column: 1; grid-row: 1; justify-self: center; }
.header__bar > .header__phone { grid-column: 2; grid-row: 1; justify-self: end; }
.header__bar > .btn { grid-column: 3; grid-row: 1; justify-self: end; }
.header__bar > .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
.brand__text { font-family: var(--font-heading); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.brand__text small { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav a {
font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small);
color: var(--ink); position: relative; padding: .35rem 0;
}
.nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
background: var(--brand); border-radius: 2px;
transition: width var(--dur) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--brand); }
/* The nav-link rules above must not strip the button of its own padding */
.nav a.btn {
flex: none; white-space: nowrap;
padding: .72rem 1.5rem;
font-size: .9375rem;
color: var(--brand-900);
display: none; /* desktop uses .header__actions instead */
}
.nav a.btn::after { display: none; }
.header__actions a.btn { color: var(--brand-900); }
.header__phone { display: flex; align-items: center; gap: .7rem; flex: none; }
.header__phone .icon-badge { width: 42px; height: 42px; border-radius: var(--r-sm); }
.header__phone .icon-badge svg { width: 19px; height: 19px; }
.header__phone-label { font-size: .75rem; color: var(--muted); line-height: 1.2; }
.header__phone-number { font-family: var(--font-heading); font-weight: 700; color: var(--ink); font-size: var(--fs-small); }
.nav-toggle {
display: none;
width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: #fff; color: var(--ink); place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* ==========================================================================
07. SECTIONS
========================================================================== */
/* --- Hero --------------------------------------------------------------- */
.hero {
position: relative;
padding-block: clamp(3rem, 7vw, 6rem) clamp(5rem, 10vw, 9rem);
overflow: hidden;
}
.hero::before { /* soft brand wash behind the artwork */
content: ""; position: absolute; inset: 0 0 auto 42%;
height: 100%;
background: radial-gradient(60% 60% at 60% 30%, var(--brand-050), transparent 70%);
pointer-events: none;
}
.hero__grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem); align-items: center;
position: relative; z-index: 1;
}
.hero__title { margin-bottom: var(--sp-5); }
.hero__text { max-width: 34rem; }
.hero__actions { margin-top: var(--sp-6); }
.hero__media { position: relative; }
.hero__media > img,
.hero__media > .media-placeholder {
width: 100%;
border-radius: var(--r-blob);
box-shadow: var(--shadow-brand);
aspect-ratio: 4 / 3.4;
object-fit: cover;
}
.hero__quote {
position: absolute; left: -2.5rem; bottom: -3.5rem; z-index: 2;
max-width: 330px;
}
/* --- CTA strip ---------------------------------------------------------- */
.cta-strip { background: var(--brand); position: relative; overflow: hidden; }
.cta-strip::after {
content: ""; position: absolute; right: -80px; top: -80px;
width: 320px; height: 320px; border-radius: 50%;
background: rgba(255, 255, 255, .07);
}
.cta-strip__inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-5); flex-wrap: wrap;
padding-block: clamp(2rem, 4vw, 3rem);
position: relative; z-index: 1;
}
.cta-strip h2 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.cta-strip p { margin: 0; }
/* --- Stats band --------------------------------------------------------- */
.stats-band .grid { gap: clamp(1.5rem, 4vw, 3rem); }
.stats-band .stat + .stat { position: relative; }
/* --- About / split media ------------------------------------------------ */
.media-split__media { position: relative; }
.media-split__media > img,
.media-split__media > .media-placeholder {
width: 100%; border-radius: var(--r-blob); box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3.2; object-fit: cover;
}
.media-split__badge {
position: absolute; right: -1.25rem; bottom: -1.25rem;
background: #fff; border-radius: var(--r-md); padding: 1.15rem 1.4rem;
box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .9rem;
min-width: 200px;
}
.media-split__badge .icon-badge { width: 46px; height: 46px; }
.media-split__badge .icon-badge svg { width: 22px; height: 22px; }
.media-split__badge strong {
display: block; font-family: var(--font-heading); color: var(--ink); font-size: 1.35rem; line-height: 1;
}
.media-split__badge span { font-size: .8125rem; color: var(--muted); letter-spacing: .01em; }
/* --- Partners / logo strip ---------------------------------------------- */
.logo-strip {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
}
.logo-strip img,
.logo-strip .logo-placeholder {
width: 100%; max-height: 56px; object-fit: contain;
filter: grayscale(1); opacity: .72;
transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.logo-strip a:hover img, .logo-strip img:hover { filter: grayscale(0); opacity: 1; }
/* --- Process ------------------------------------------------------------ */
.process__media { position: relative; }
.process__media > img,
.process__media > .media-placeholder {
width: 100%; border-radius: var(--r-blob); aspect-ratio: 4 / 3.4; object-fit: cover;
box-shadow: var(--shadow-lg);
}
.support-card {
position: absolute; left: -1.5rem; top: 2rem;
background: var(--brand); color: #fff;
border-radius: var(--r-md); padding: 1.15rem 1.5rem;
box-shadow: var(--shadow-brand);
}
.support-card__label {
font-size: .75rem; letter-spacing: .04em;
color: rgba(255, 255, 255, .7); margin-bottom: .3rem;
}
.support-card__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: #fff; }
/* --- Contact band (dark) ------------------------------------------------ */
.contact-band { background: var(--dark); position: relative; overflow: hidden; }
.contact-band::before {
content: ""; position: absolute; left: -140px; bottom: -140px;
width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle, rgba(22, 83, 165, .55), transparent 65%);
}
.contact-band .container { position: relative; z-index: 1; }
.contact-band__title { font-size: var(--fs-display); margin-bottom: var(--sp-6); }
/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
background: var(--surface);
padding-block: clamp(3rem, 6vw, 5.5rem);
border-bottom: 1px solid var(--line);
text-align: center;
}
.page-hero h1 { margin-bottom: var(--sp-3); }
.page-hero p { max-width: 640px; margin-inline: auto; color: var(--muted); font-size: var(--fs-lead); }
.breadcrumb {
display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.breadcrumb li { display: flex; gap: .5rem; }
/* --- Map placeholder ---------------------------------------------------- */
.map-embed {
border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
min-height: 380px; background: var(--surface);
display: grid; place-items: center; text-align: center;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
/* --- Media placeholder (swap for a real ![]()
) -------------------------- */
.media-placeholder {
display: grid; place-items: center; text-align: center;
background: linear-gradient(135deg, var(--brand-050), var(--brand-100));
color: var(--brand);
font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-small);
letter-spacing: .02em;
border: 1.5px dashed rgba(10, 44, 78, .3);
padding: 1rem;
}
.logo-placeholder {
display: grid; place-items: center; height: 56px;
border: 1.5px dashed var(--line); border-radius: var(--r-sm);
color: var(--muted); font-size: .75rem; letter-spacing: .02em;
filter: none !important; opacity: 1 !important;
}
/* ==========================================================================
08. FOOTER
========================================================================== */
.footer { background: var(--dark); color: rgba(255, 255, 255, .68); padding-block: var(--sp-8) var(--sp-5); }
.footer h5 {
color: #fff; font-size: var(--fs-small); letter-spacing: .02em;
margin-bottom: var(--sp-4);
}
.footer__grid {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__brand img { height: 40px; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-small); max-width: 30ch; }
.footer a { color: rgba(255, 255, 255, .68); font-size: var(--fs-small); }
.footer a:hover { color: #fff; }
.footer ul { display: grid; gap: .7rem; }
.footer__social { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.footer__social a {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255, 255, 255, .08); color: #fff;
transition: background var(--dur-fast) var(--ease);
}
.footer__social a:hover { background: var(--brand); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
margin-top: var(--sp-7); padding-top: var(--sp-5);
border-top: 1px solid rgba(255, 255, 255, .1);
display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
font-size: var(--fs-small);
}
.to-top {
position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
width: 46px; height: 46px; border-radius: 50%; border: 0;
background: var(--brand); color: #fff; display: grid; place-items: center;
box-shadow: var(--shadow-brand);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }
/* ==========================================================================
09. MOTION / REVEAL
========================================================================== */
[data-reveal] {
opacity: 0; transform: translateY(22px);
transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ==========================================================================
10. RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.logo-strip { grid-template-columns: repeat(3, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; }
.hero__quote { left: 0; bottom: -3rem; }
}
@media (max-width: 900px) {
:root { --header-h: 72px; }
.nav-toggle { display: grid; }
.header__phone { display: none; }
.nav {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: #fff; border-bottom: 1px solid var(--line);
padding: var(--sp-4) var(--gutter) var(--sp-6);
box-shadow: var(--shadow-md);
transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
max-height: 70vh; overflow-y: auto;
}
.nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.nav a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.nav a::after { display: none; }
.nav .btn { margin-top: var(--sp-4); }
.grid--2, .grid--3, .grid--split, .hero__grid { grid-template-columns: 1fr; }
.hero__media { order: -1; }
.hero__quote { position: static; margin-top: -2.5rem; margin-inline: auto; }
.media-split__media { margin-bottom: var(--sp-6); }
.media-split__badge { right: 0; bottom: -1rem; }
.step::after { display: none; }
.cta-strip__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 620px) {
.grid--4, .grid--3 { grid-template-columns: 1fr; }
.logo-strip { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr; }
.stats-band .grid { grid-template-columns: repeat(2, 1fr); }
.btn { width: 100%; }
.cluster .btn { width: auto; }
.footer__bottom { flex-direction: column; }
}
/* --- Print -------------------------------------------------------------- */
@media print {
.header, .footer, .to-top, .cta-strip, .nav-toggle { display: none !important; }
body { color: #000; }
}
/* ==========================================================================
11. CREST GATE — BRAND COMPONENTS
Everything below is specific to this brand: the gold call-to-action, the
navy hero, the credentials card, the values strip and the capability and
vision/mission cards. Built on the tokens in section 01.
========================================================================== */
/* --- Logo lockup: emblem + wordmark -------------------------------------
Sizes come from --logo-mark / --logo-word, set on .header in section 06.
They shrink when .header gains .is-stuck, and the transition below is
what animates it. */
.brand__mark { height: var(--logo-mark, 46px); width: auto; transition: height var(--dur) var(--ease); }
.brand__word { height: var(--logo-word, 21px); width: auto; transition: height var(--dur) var(--ease); }
.footer__brand .brand__mark { height: 54px; }
.footer__brand .brand__word { height: 24px; }
.footer__lockup { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-4); }
/* --- Gold call-to-action ------------------------------------------------ */
.btn--accent {
--btn-bg: var(--accent);
--btn-fg: var(--brand-900);
--btn-bd: var(--accent);
}
.btn--accent:hover { --btn-bg: var(--accent-600); --btn-bd: var(--accent-600); box-shadow: var(--shadow-gold); }
/* Gold underline used under the eyebrow rule on dark grounds */
.on-dark .eyebrow { color: var(--accent); }
/* Second line of a headline, set in gold */
.headline-accent { color: var(--accent); }
.on-dark .headline-accent { color: var(--accent); }
/* --- Navy hero ---------------------------------------------------------- */
.hero--dark {
background: var(--brand-900);
color: rgba(255, 255, 255, .8);
}
.hero--dark::before {
inset: 0;
background:
radial-gradient(52% 62% at 78% 32%, rgba(22, 83, 165, .55), transparent 68%),
radial-gradient(38% 48% at 8% 88%, rgba(252, 179, 21, .10), transparent 70%);
}
.hero--dark .hero__media > img { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.hero--dark .lead { color: rgba(255, 255, 255, .78); }
.hero__rule {
width: 132px; height: 3px; border-radius: 3px; margin: 0 0 var(--sp-5);
background: linear-gradient(90deg, var(--accent), rgba(252, 179, 21, 0));
position: relative;
}
.hero__rule::after {
content: ""; position: absolute; right: -3px; top: -2.5px;
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
/* --- Credentials card (overlaps the hero image) ------------------------- */
.fact-card {
position: absolute; left: -2rem; bottom: -3.25rem; z-index: 2;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
background: rgba(9, 40, 70, .92);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--r-xl);
padding: 1.4rem 1.6rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
max-width: 460px;
}
.fact { text-align: center; }
.fact__icon {
display: inline-grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
border: 1.5px solid var(--accent); color: var(--accent);
margin-bottom: .55rem;
font-family: var(--font-heading); font-weight: 700; font-size: .9375rem;
}
.fact__icon svg { width: 21px; height: 21px; }
.fact__label {
font-size: .75rem; line-height: 1.35; color: rgba(255, 255, 255, .82);
font-family: var(--font-body);
}
.fact__label strong { display: block; color: #fff; font-family: var(--font-heading); font-weight: 600; }
/* --- Values strip ------------------------------------------------------- */
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.value {
padding: var(--sp-5) var(--sp-4);
border-left: 1px solid var(--line);
}
.value:first-child { border-left: 0; padding-left: 0; }
.value__name {
font-family: var(--font-heading); font-weight: 700;
font-size: var(--fs-body); letter-spacing: 0;
color: var(--brand); margin-bottom: .6rem;
}
.value p { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.on-dark .value { border-left-color: rgba(255, 255, 255, .14); }
.on-dark .value__name { color: #fff; }
.on-dark .value p { color: rgba(255, 255, 255, .68); }
/* --- Capability card (image on top) ------------------------------------- */
.cap-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cap-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cap-card img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.cap-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.cap-card h4 { margin-bottom: .5rem; }
.cap-card p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
/* --- Vision / mission --------------------------------------------------- */
.vm-card {
border-radius: var(--r-lg);
padding: clamp(1.75rem, 3.5vw, 2.5rem);
background: #fff; border: 1px solid var(--line);
position: relative; overflow: hidden;
}
.vm-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
}
.vm-card--dark { background: var(--brand-900); border-color: transparent; }
.vm-card--dark h3 { color: #fff; }
.vm-card--dark p { color: rgba(255, 255, 255, .78); }
.vm-card .icon-badge { margin-bottom: var(--sp-4); }
.vm-card--dark .icon-badge { background: rgba(255, 255, 255, .1); color: var(--accent); }
/* --- Product list rows (products page detail) --------------------------- */
.spec-list { display: grid; gap: .55rem; }
.spec-list li { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; }
.spec-list li::before {
content: ""; margin-top: .55rem; width: 8px; height: 8px; border-radius: 2px;
background: var(--accent);
}
/* --- Phone list (contact band) ------------------------------------------ */
.phone-list { display: grid; gap: .35rem; }
.phone-list a { font-variant-numeric: tabular-nums; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
.values { grid-template-columns: repeat(3, 1fr); }
.value:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
.fact-card { position: static; max-width: none; margin-top: var(--sp-5); left: auto; bottom: auto; }
.hero--dark .hero__media { margin-bottom: var(--sp-6); }
}
@media (max-width: 620px) {
.values { grid-template-columns: 1fr; }
.value { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
.value:first-child { border-top: 0; padding-top: 0; }
.on-dark .value { border-top-color: rgba(255, 255, 255, .14); }
.fact-card { grid-template-columns: 1fr; text-align: left; }
.fact { display: grid; grid-template-columns: 44px 1fr; gap: .85rem; align-items: center; text-align: left; }
.fact__icon { margin-bottom: 0; }
}
/* ==========================================================================
12. INTERACTION — card border sweep and glow
On hover a gold light travels around the card border and the card lifts
with a soft glow. The sweep uses an animated conic-gradient behind a
border-shaped mask; browsers without @property support simply get the
static gold edge and the glow.
========================================================================== */
@property --sweep {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.card, .cap-card, .vm-card { position: relative; isolation: isolate; }
.card::after,
.cap-card::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.6px; /* the visible border thickness */
background: conic-gradient(
from var(--sweep),
transparent 0deg,
transparent 200deg,
rgba(252, 179, 21, .35) 262deg,
var(--accent) 306deg,
#FFE9B0 330deg,
var(--accent) 344deg,
transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
z-index: 1;
}
.card:hover::after,
.card:focus-visible::after,
.cap-card:hover::after,
.cap-card:focus-visible::after {
opacity: 1;
animation: sweep-border 2.2s linear infinite;
}
@keyframes sweep-border { to { --sweep: 360deg; } }
/* The glow */
.card:hover, .card:focus-visible {
transform: translateY(-6px);
border-color: transparent;
box-shadow:
0 20px 45px rgba(5, 32, 59, .16),
0 0 34px rgba(252, 179, 21, .30);
}
.cap-card:hover, .cap-card:focus-visible {
box-shadow:
0 20px 45px rgba(5, 32, 59, .16),
0 0 34px rgba(252, 179, 21, .28);
}
/* Cards used as links keep their text colour on hover */
a.card:hover, a.card:hover h4 { color: inherit; }
a.card h4 { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.card:hover::after, .cap-card:hover::after { animation: none; opacity: 1;
background: var(--accent); }
.card:hover { transform: none; }
}
/* ==========================================================================
13. HEADER — responsive behaviour for the centred logo
========================================================================== */
@media (max-width: 1240px) {
.header { --logo-mark: 52px; --logo-word: 24px; }
.header__bar > .header__phone { display: none; }
.header__bar { grid-template-columns: minmax(0, 1fr) auto; }
.header__bar > .btn { grid-column: 2; }
.header__bar > .nav-toggle { grid-column: 2; }
}
@media (max-width: 900px) {
.header { --logo-mark: 46px; --logo-word: 21px; }
.header.is-stuck { --logo-mark: 38px; --logo-word: 17px; }
.header__bar > .btn { display: none; } /* shown inside the dropdown instead */
.nav a.btn { display: inline-flex; }
}
/* ==========================================================================
14. HOME HERO
Logo, name, tagline, rule, lede, buttons and the credentials card sit on
the left; the interactive dotted map fills the right and bleeds off the
edge. On small screens the map moves below the text.
========================================================================== */
.hero--home {
position: relative;
overflow: hidden;
background: var(--brand-900);
color: rgba(255, 255, 255, .8);
padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(2.25rem, 4vw, 3.5rem);
display: flex;
flex-direction: column;
}
.hero--home::before { /* faint depth behind the map */
content: "";
position: absolute; inset: 0 0 0 40%;
background: radial-gradient(58% 62% at 62% 42%, rgba(22, 83, 165, .40), transparent 70%);
pointer-events: none;
}
.hero--home .container { position: relative; z-index: 2; order: 1; }
.hero--home .hero__grid { display: block; }
.hero__text { max-width: 40rem; }
.hero__logo {
width: clamp(96px, 9vw, 124px);
height: auto;
margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.hero--home .hero__title {
font-size: clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.015em;
color: #fff;
margin-bottom: var(--sp-4);
}
.hero__tagline {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.0625rem, .95rem + .5vw, 1.4375rem);
color: #fff;
margin-bottom: var(--sp-4);
}
.hero--home .hero__rule { margin-bottom: var(--sp-4); }
.hero__lede { max-width: 33rem; margin-bottom: var(--sp-5); }
.hero--home .hero__actions { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* the credentials card is in normal flow here, not floating over an image */
.hero--home .fact-card {
position: static;
max-width: 580px;
left: auto; bottom: auto;
padding: 1.1rem 1.3rem;
}
/* --- the map ------------------------------------------------------------ */
.hero__map {
position: absolute;
inset: 0 -2% 0 42%;
z-index: 1;
order: 2;
/* fade the map out on its left edge so it never competes with the text */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%);
mask-image: linear-gradient(to right, transparent 0%, #000 20%);
}
.hero__map canvas {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: manipulation;
}
@media (max-width: 1100px) {
.hero__map { inset: 0 -4% 0 50%; opacity: .6; }
.hero__text { max-width: 34rem; }
}
@media (max-width: 900px) {
.hero--home { padding-bottom: 0; }
.hero__map {
position: relative;
inset: auto;
-webkit-mask-image: none;
mask-image: none;
width: 100%;
height: clamp(300px, 82vw, 380px);
margin-top: var(--sp-6);
opacity: 1;
}
.hero--home::before { inset: 0; }
.hero__text { max-width: none; }
.hero--home .fact-card { max-width: none; }
}
/* ==========================================================================
15. PRODUCT GROUPS
Four supply lines, each a card listing what it covers, and the per-line
detail grids on the products page.
========================================================================== */
.group-grid { align-items: stretch; }
.group-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.group-card h4 { margin: var(--sp-2) 0 0; }
.group-card > p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.group-card__list { padding-top: var(--sp-2); }
.group-card__list li { font-size: var(--fs-small); color: var(--ink); }
.group-card .link-arrow { margin-top: auto; padding-top: var(--sp-5); }
/* Item tiles on the products page */
.item-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: var(--sp-3);
}
.item-tile {
display: flex; align-items: center; gap: .75rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
font-family: var(--font-heading);
font-weight: 600;
color: var(--ink);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.item-tile::before {
content: ""; width: 9px; height: 9px; border-radius: 2px;
background: var(--accent); flex: none;
}
.item-tile:hover {
transform: translateY(-3px);
border-color: transparent;
box-shadow: 0 12px 28px rgba(5, 32, 59, .12), 0 0 22px rgba(252, 179, 21, .22);
}
.section--surface .item-tile { background: #fff; }
@media (max-width: 1100px) {
.group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.group-grid { grid-template-columns: 1fr; }
.item-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
16. FIXES
========================================================================== */
/* --- The hero container must not swallow clicks meant for the map --------
The text column sits in a full-width container that overlaps the canvas.
Without this, only the sliver of map outside the container was clickable. */
.hero--home .container { pointer-events: none; }
.hero--home .hero__text { pointer-events: auto; }
/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 620px) {
/* Hero buttons: matched full-width pills rather than two ragged widths */
.hero__actions { width: 100%; }
.hero__actions .btn { width: 100%; }
/* Products page: the overview cards list every item, and the sections
below list them again as tiles. On one column that reads as duplication,
so the overview keeps just the name, the intro and the link. */
.group-grid--overview .group-card__list { display: none; }
/* Long call-to-action labels should not wrap inside their pill */
.btn { padding-inline: 1.25rem; }
/* A little less air between stacked sections */
.section { padding-block: 3.25rem; }
.section--tight { padding-block: 2.5rem; }
}
/* ==========================================================================
17. WIDE FEATURE IMAGE + NUMBERED POINTS
========================================================================== */
/* A panoramic photograph in the split layout. The frame is shallower and the
picture is contained rather than cropped, so nothing is cut off; the white
ground of the photograph and the card behind it are the same, so the
letterboxing is invisible. */
.media-split__media--wide > img {
aspect-ratio: 4 / 2.45;
object-fit: contain;
background: #fff;
padding: clamp(.75rem, 2vw, 1.5rem);
}
/* 01 / 02 / 03 markers on the About checklist */
.point-num {
display: inline-block;
min-width: 2.1em;
color: var(--accent);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
@media (max-width: 900px) {
.media-split__media--wide > img { aspect-ratio: 4 / 2.1; }
}
/* ==========================================================================
18. ABOUT — full-width banner layout
The product photograph is panoramic, so it runs the full width of the
container with the text beneath, rather than being cropped into a column.
========================================================================== */
.about-stack__media { position: relative; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.about-stack__media > img {
width: 100%;
aspect-ratio: 1600 / 536;
object-fit: cover;
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
background: #fff;
}
.about-stack__media .media-split__badge { right: clamp(1rem, 3vw, 2rem); bottom: -1.25rem; }
.about-stack__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.checklist--cols {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
padding-top: clamp(1.5rem, 3vw, 2.25rem);
border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
.about-stack__head { grid-template-columns: 1fr; }
.checklist--cols { grid-template-columns: 1fr; gap: var(--sp-5); }
.about-stack__media > img { aspect-ratio: 1600 / 700; }
}
/* The contact form is much taller than the card beside it, so the card
travels with the reader rather than leaving a column of empty space. */
@media (min-width: 901px) {
.contact-side { position: sticky; top: 7rem; }
}