/* ==========================================================================
Front-end stylesheet manifest
--------------------------------------------------------------------------
Pure @import list. No rules live in this file.
Build: npm run build -> assets/css/main.build.css
Adding a block stylesheet is one new file plus one line in the Blocks
section below. Order matters: base, then components, then blocks, then
responsive last so its overrides win.
========================================================================== */
/* Base ------------------------------------------------------------------- */
/* ==========================================================================
Design tokens
--------------------------------------------------------------------------
Every value in the theme references a token from this file. No component
stylesheet hard-codes a colour, a radius, an easing curve or a section
padding.
Paths are relative to the build output (assets/css/main.build.css).
========================================================================== */
/* --------------------------------------------------------------------------
Averta PE — licensed, self-hosted
-------------------------------------------------------------------------- */
@font-face {
font-family: "Averta";
src: url("../fonts/averta-pe-regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Averta";
src: url("../fonts/averta-pe-medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Averta";
src: url("../fonts/averta-pe-semibold.otf") format("opentype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
/* ------------------------------------------------------------------------
Raw palette
------------------------------------------------------------------------ */
--skw-ink-900: #001624; /* darkest navy — page background */
--skw-ink-800: #002A42; /* navy — light-on-dark surfaces */
--skw-ink-700: #0A3A55;
--skw-ink-600: #12465F;
--skw-bone-100: #FAFAFA; /* bone — inverted band background */
--skw-bone-200: #F1F1EE;
--skw-bone-300: #DFE5E5;
--skw-signal: #FA404F; /* accent red */
--skw-signal-dim: #C12B38;
--skw-black: #000000;
--skw-white: #FFFFFF;
/* ------------------------------------------------------------------------
Page layer
The semantic names the component CSS actually consumes. Swapping a
palette value above re-skins the whole site through this layer.
------------------------------------------------------------------------ */
--skw-navy: var(--skw-ink-800);
--skw-navy-dp: var(--skw-ink-900);
--skw-navy-hi: #083A56;
--skw-bone: var(--skw-bone-100);
--skw-bone-w: #e9e9e9; /* bone, warmed — plate backgrounds */
--skw-bone-ln: rgba(0, 22, 36, 0.12); /* hairline on a bone band */
--skw-rule-d: rgba(250, 250, 250, 0.12); /* hairline on a navy band */
--skw-rule-ds: rgba(250, 250, 250, 0.22); /* the same, emphasised */
--skw-mute-d: #7E95A5; /* muted text on navy */
--skw-mute-l: #5B6B73; /* muted text on bone */
--skw-live: var(--skw-signal); /* accent as used for live/active state */
/* Grid hairline. Reassigned per context by the band it sits in — see
base/layout.css. */
--skw-cell-line: var(--skw-rule-d);
/* ------------------------------------------------------------------------
Typography
------------------------------------------------------------------------ */
--skw-ff-sans: "Averta", "Averta PE", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
/* The source design labelled this "mono" but resolves it to the sans stack.
Kept as a separate token so telemetry-style labels can be given a real
monospace face later without touching every call site. */
--skw-ff-alt: var(--skw-ff-sans);
--skw-fs-display-xl: clamp(3.5rem, 10.5vw, 11.5rem);
--skw-fs-display-l: clamp(3rem, 7vw, 7rem);
--skw-fs-display-m: clamp(2.25rem, 4.6vw, 4.25rem);
--skw-fs-h1: clamp(2rem, 3.4vw, 3rem);
--skw-fs-h2: clamp(1.5rem, 2.2vw, 2rem);
--skw-fs-h3: 1.25rem;
--skw-fs-body-l: 1.0625rem; /* 17px */
--skw-fs-body: 0.9375rem; /* 15px */
--skw-fs-body-s: 0.8125rem; /* 13px */
--skw-fs-micro: 0.6875rem; /* 11px — eyebrow labels */
--skw-fs-nano: 0.625rem; /* 10px — telemetry labels */
--skw-lh-tight: 0.92;
--skw-lh-snug: 1.08;
--skw-lh-normal: 1.45;
--skw-lh-body: 1.55; /* the body line-height the design actually ships */
--skw-lh-loose: 1.6;
--skw-ls-display: -0.03em;
--skw-ls-heading: -0.015em;
--skw-ls-body: -0.005em;
--skw-ls-label: 0.14em;
--skw-ls-tele: 0.22em;
/* ------------------------------------------------------------------------
Section rhythm
Centralised here rather than repeated per section. Every block section
is .sx / .sx-wrap / .sx-head (base/layout.css) and inherits these, so
vertical rhythm changes in one place.
------------------------------------------------------------------------ */
--skw-pad: clamp(96px, 14vh, 160px); /* section padding-block */
--skw-gutter: clamp(24px, 4vw, 56px); /* section padding-inline */
--skw-maxw: 90rem; /* inner container */
--skw-header-h: 72px;
--skw-header-h-scrolled: 56px;
--skw-crumb-top: 28px; /* breadcrumb offset below header */
--skw-anchor-offset: 88px; /* scroll-margin for in-page anchors */
/* ------------------------------------------------------------------------
Radii and borders — the design is essentially square
------------------------------------------------------------------------ */
--skw-r-0: 0;
--skw-r-1: 2px;
--skw-r-2: 4px;
--skw-r-pill: 999px;
--skw-bw: 1px;
--skw-sh-1: 0 1px 0 rgba(0, 0, 0, 0.04);
--skw-sh-2: 0 12px 40px -12px rgba(0, 22, 36, 0.45);
/* ------------------------------------------------------------------------
Motion
------------------------------------------------------------------------ */
--skw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--skw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--skw-ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
--skw-dur-fast: 160ms;
--skw-dur-base: 260ms;
--skw-dur-slow: 520ms;
--skw-dur-vslow: 1200ms;
--skw-dur-reveal: 900ms;
/* ------------------------------------------------------------------------
Spacing scale
Declared for completeness. The design mostly uses clamp() values inline;
these cover the fixed gaps.
------------------------------------------------------------------------ */
--skw-s-1: 0.25rem;
--skw-s-2: 0.5rem;
--skw-s-3: 0.75rem;
--skw-s-4: 1rem;
--skw-s-5: 1.5rem;
--skw-s-6: 2rem;
--skw-s-7: 3rem;
--skw-s-8: 4rem;
--skw-s-9: 6rem;
--skw-s-10: 8rem;
--skw-s-11: 12rem;
/* ------------------------------------------------------------------------
Reserved
Declared in the source design but unused by any rule. Kept so the
palette stays complete and nothing is silently lost.
------------------------------------------------------------------------ */
--skw-moss-700: #2A4744;
--skw-moss-600: #3D5B58;
--skw-moss-500: #547370;
--skw-steel-700: #66778D;
--skw-steel-600: #8C9998;
--skw-steel-500: #A4AEBE;
--skw-steel-400: #BEC5C4;
}
@media (max-width: 980px) {
:root {
--skw-crumb-top: 16px;
}
}
/* ==========================================================================
Globals - reset, document defaults, shared utilities
--------------------------------------------------------------------------
The resolved base layer. In the source the document rules were split
between tokens.css and the top of system.css, with system.css winning on
background, font-size and line-height; only the winning values are kept
here.
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
html,
body {
overflow-x: clip;
}
body {
margin: 0;
background: var(--skw-navy-dp);
color: var(--skw-bone);
font-family: var(--skw-ff-sans);
font-size: var(--skw-fs-body);
line-height: var(--skw-lh-body);
letter-spacing: var(--skw-ls-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "ss02", "kern" 1;
}
::-moz-selection {
background: var(--skw-live);
color: var(--skw-white);
}
::selection {
background: var(--skw-live);
color: var(--skw-white);
}
::-moz-selection {
background: var(--skw-live);
color: var(--skw-white);
}
img,
svg,
video {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--skw-signal);
outline-offset: 3px;
border-radius: var(--skw-r-1);
}
/* Anchor links land below the fixed header rather than under it. */
[id] {
scroll-margin-top: var(--skw-anchor-offset);
}
/* An author rule like .puse__grid{display:grid} outbids the user-agent
[hidden]{display:none}, so every filtered-out card would stay visible. The
filters and the "view more" control both toggle the attribute, so it is
given the weight to win. */
[hidden] {
display: none !important;
}
/* --------------------------------------------------------------------------
Utilities
-------------------------------------------------------------------------- */
/* Forces a headline fragment onto its own line. Used by the stacked display
headlines. */
.hl {
display: block;
}
/* Wraps a technical term so it never breaks across lines. Injected around
terms like "RQ-35", "EO/IR" and "-30 C" by skw_typo(). display:contents
keeps the span out of the layout entirely. */
.nw {
display: contents;
white-space: nowrap;
}
.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;
}
/* --------------------------------------------------------------------------
Reduced motion
Animation is decorative throughout: reveals, counters, the scramble
effect, the slider and the hero. All of it is safe to collapse.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Section rhythm
--------------------------------------------------------------------------
Every block section renders as:
eyebrow / title / lede
body
Section padding and the inner container live here only. A block stylesheet
styles its own contents and overrides rhythm only where the design
genuinely deviates.
========================================================================== */
.sx {
position: relative;
padding-block: var(--skw-pad);
padding-inline: var(--skw-gutter);
}
.sx-wrap {
position: relative;
z-index: 1;
max-width: var(--skw-maxw);
margin-inline: auto;
}
/* There is deliberately no .sx-head. The gap between a section head and its
body is not uniform in this design - it runs 88px, 96px, 110px and 120px
depending on the section - so each block stylesheet sets the margin on its
own __head class and .section__head carries only the shared grid. */
/* --------------------------------------------------------------------------
Bands
The site is dark by default. .band-light inverts a section to the bone
surface. The header watches which band it overlaps and recolours itself
(assets/js/header.js), so the class has to stay on the outer section
element.
-------------------------------------------------------------------------- */
/* The band background is the warmed bone, not --skw-bone: the lighter tone is
used for plates and cards sitting on top of this surface. */
.band-light {
background: var(--skw-bone-w);
color: var(--skw-navy);
}
/* The hairline colour for the shared cell grid is set in
components/cell-grid.css, which owns that whole treatment. */
/* --------------------------------------------------------------------------
Skip link
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -100px;
left: var(--skw-gutter);
z-index: 200;
padding: 10px 18px;
background: var(--skw-bone);
color: var(--skw-navy);
font-size: var(--skw-fs-body-s);
font-weight: 500;
transition: top var(--skw-dur-fast) var(--skw-ease-out);
}
.skip-link:focus {
top: 12px;
}
/* Components ------------------------------------------------------------- */
/* ==========================================================================
Buttons and text links
--------------------------------------------------------------------------
Four button variants plus the .more text link. Every one carries the
diagonal arrow glyph.
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
height: 46px;
padding: 0 24px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
border: 1px solid transparent;
white-space: nowrap;
transition: background 220ms var(--skw-ease-out),
color 220ms var(--skw-ease-out),
border-color 220ms var(--skw-ease-out);
}
.btn svg { width: 12px; height: 12px; transition: transform 260ms var(--skw-ease-out); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn--bone { background: var(--skw-bone); color: var(--skw-navy); }
.btn--bone:hover { background: #fff; }
.btn--navy { background: var(--skw-navy); color: var(--skw-bone); }
.btn--navy:hover { background: var(--skw-navy-dp); }
.btn--outline-lt { background: transparent; color: var(--skw-navy); border-color: var(--skw-bone-ln); }
.btn--outline-lt:hover { border-color: var(--skw-live); color: var(--skw-live); }
.btn--outline-dk { background: transparent; color: var(--skw-bone); border-color: var(--skw-rule-ds); }
.btn--outline-dk:hover { border-color: var(--skw-live); color: var(--skw-live); background: transparent; }
.btn--outline-lt-hero { background: transparent; color: var(--skw-bone); border-color: rgba(255,255,255,0.35); }
.btn--outline-lt-hero:hover { border-color: var(--skw-live); color: var(--skw-live); background: transparent; }
.copen__side .btn { align-self: flex-start; }
.more {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--skw-ff-sans); font-weight: 500; font-size: 14px;
color: inherit;
transition: color 220ms var(--skw-ease-out);
}
.more svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform 260ms var(--skw-ease-out); }
.more:hover { color: var(--skw-live); }
.more:hover svg { transform: translate(3px, -3px); }
.aside .btn { align-self: flex-start; }
.trust__card .more { color: var(--skw-navy); align-self: flex-start; }
.trust__card .more:hover { color: var(--skw-live); }
.arelated__foot .more { background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--skw-navy); }
.arelated__foot .more:hover { color: var(--skw-live); }
@media (max-width: 860px) {
.aside--toc > .btn { justify-self: start; }
}
/* ==========================================================================
Section heads and shared utilities
--------------------------------------------------------------------------
The eyebrow, title and lede used by most blocks, the terrain backdrop and
the .js-anim gate that holds entrance animations until the scripts load.
========================================================================== */
.tlabel {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--skw-bone);
font-weight: 400;
}
.tlabel::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
background: var(--skw-live);
}
.band-light .tlabel { color: var(--skw-navy); }
.section__title {
font-weight: 600;
font-size: clamp(2rem, 4.4vw, 4.5rem);
line-height: 1.14;
letter-spacing: -0.03em;
margin: 18px 0 0;
text-wrap: balance;
max-width: 18ch;
}
.section__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.55;
max-width: 50ch;
margin: 0;
color: var(--skw-mute-d);
}
.section__head {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(24px, 4vw, 80px);
align-items: end;
}
.js-anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--skw-ease-out), transform 900ms var(--skw-ease-out); }
.js-anim .reveal.in { opacity: 1; transform: none; }
.band-light .section__lede { color: var(--skw-mute-l); }
.sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: fixed; top: 12px; left: 12px; z-index: 100;
padding: 10px 16px; border-radius: 999px;
background: var(--skw-bone); color: var(--skw-navy);
font-size: 13px; font-weight: 500;
transform: translateY(-160%);
transition: transform 200ms var(--skw-ease-out);
}
.skip-link:focus { transform: none; }
.products .section__title { color: var(--skw-bone); }
.products .section__lede { color: var(--skw-mute-d); }
.company .section__title { color: var(--skw-bone); }
.company .section__lede { color: var(--skw-mute-d); }
.terrain-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.terrain-bg::before,
.terrain-bg::after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: contain;
}
.terrain-bg[data-variant="a"]::before {
top: -4%; right: -4%;
width: 65%; aspect-ratio: 1920 / 1738;
background-image: url("../images/terrain-1.png");
background-position: top right;
}
.terrain-bg[data-variant="b"]::before {
bottom: -4%; left: -4%;
width: 60%; aspect-ratio: 1940 / 1643;
background-image: url("../images/terrain-2.png");
background-position: bottom left;
}
.terrain-bg[data-variant="c"]::before {
top: -4%; right: -4%;
width: 55%; aspect-ratio: 1920 / 1738;
background-image: url("../images/terrain-1.png");
background-position: top right;
}
.terrain-bg[data-variant="c"]::after {
bottom: -4%; left: -4%;
width: 50%; aspect-ratio: 1940 / 1643;
background-image: url("../images/terrain-2.png");
background-position: bottom left;
}
.band-light .terrain-bg::before,
.band-light .terrain-bg::after {
filter: invert(1);
opacity: 0.32;
mix-blend-mode: multiply;
}
.products .terrain-bg::before,
.products .terrain-bg::after,
.company .terrain-bg::before,
.company .terrain-bg::after {
opacity: 0.07;
}
.mhero .tlabel { color: var(--skw-bone); }
.ovhero .tlabel { color: var(--skw-bone); }
.lhero .tlabel { color: var(--skw-bone); }
.prod__lede .tlabel { grid-column: 1; }
.prod.band-light .section__title { color: var(--skw-navy); }
.prod.band-light .section__lede { color: var(--skw-mute-l); }
.tspec__head .tlabel { margin-bottom: 16px; }
.psystem.band-light .section__title { color: var(--skw-navy); }
.psystem:not(.band-light) .section__lede { color: var(--skw-mute-d); }
.puse.band-light .section__title { color: var(--skw-navy); }
.pdown.band-light .section__title, .pdown.band-light .pdown__row { color: var(--skw-navy); }
.pdown.band-light .section__lede, .pdown.band-light .pdown__sub, .pdown.band-light .pdown__num, .pdown.band-light .pdown__type { color: var(--skw-mute-l); }
.tslider .tlabel { color: var(--skw-bone); }
.copen .section__title { color: var(--skw-bone); max-width: 16ch; }
.copen .section__lede {
color: var(--skw-mute-d);
line-height: 1.7;
max-width: 54ch;
}
.copen .section__lede a {
color: var(--skw-bone);
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid var(--skw-rule-ds);
transition: color 220ms var(--skw-ease-out), border-color 220ms var(--skw-ease-out);
}
.copen .section__lede a:hover { color: var(--skw-live); border-color: var(--skw-live); }
.vfilm__story .tlabel { color: var(--skw-bone); }
.cap--dark .tlabel, .cap--dark .section__title { color: var(--skw-bone); }
.cap--dark .section__lede { color: var(--skw-mute-d); }
.cap--dark .terrain-bg::before, .cap--dark .terrain-bg::after { opacity: 0.07; }
.section__foot { margin-top: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 12px; }
.puse__body .tlabel { margin-bottom: 4px; }
.puse.band-light .tlabel { color: var(--skw-navy); }
.mvision--dark .tlabel, .mvision--dark .mvision__title { color: var(--skw-bone); }
.ahero__meta .tlabel { color: var(--skw-bone); }
.arelated .tlabel, .abody .tlabel { color: var(--skw-navy); }
.copen.band-light .section__title { color: var(--skw-navy); }
.copen.band-light .section__lede { color: var(--skw-mute-l); }
.copen.band-light .section__lede a { color: var(--skw-navy); border-bottom-color: var(--skw-bone-ln); }
.copen.band-light .section__lede a:hover { color: var(--skw-live); border-color: var(--skw-live); }
.pdown:not(.band-light) .section__lede { color: var(--skw-mute-d); }
.news .tlabel { color: var(--skw-navy); }
.trust .tlabel { color: var(--skw-navy); }
.tslider.band-light .tlabel { color: var(--skw-navy); }
.ahero--image .terrain-bg { display: none; }
@media (max-width: 860px) {
.section__head { gap: 12px; }
.section__lede { font-size: 16px; }
.section__title { line-height: 1.2; }
.terrain-bg[data-variant="a"]::before,
.terrain-bg[data-variant="b"]::before,
.terrain-bg[data-variant="c"]::before,
.terrain-bg[data-variant="c"]::after {
width: 80%;
}
.band-light .terrain-bg::before,
.band-light .terrain-bg::after { opacity: 0.07; }
.products .terrain-bg::before, .products .terrain-bg::after,
.company .terrain-bg::before, .company .terrain-bg::after { opacity: 0.04; }
}
@media (max-width: 980px) {
.prod__lede .tlabel, .prod__title { grid-column: 1; }
}
/* ==========================================================================
Cell grid
--------------------------------------------------------------------------
One shared treatment behind five different sections: the key-performance
figures, the proof statistics, the system architecture cells, the
capability cycle and the product hero index.
They are all the same object - a row of equal cells divided by hairlines,
with no gap, that collapses to a stack below 980px and swaps the vertical
rules for horizontal ones.
This lives in components rather than in any one block stylesheet because
no single block owns it. The hairline colour is a variable so each band
can set its own without repeating the rules.
========================================================================== */
.kperf,
.proof__grid,
.psystem__grid,
.cap__cycle,
.phero__index {
--skw-cell-line: var(--skw-rule-d);
gap: 0;
border-top: 1px solid var(--skw-cell-line);
}
/* On the bone band the hairline is dark; over a hero image it is brighter
than the standard dark-band rule. */
.band-light :is(.kperf, .proof__grid, .psystem__grid, .cap__cycle) {
--skw-cell-line: var(--skw-bone-ln);
}
.phero__index {
--skw-cell-line: rgba(250, 250, 250, 0.18);
}
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item) {
padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
border-right: 1px solid var(--skw-cell-line);
}
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item):last-child {
border-right: 0;
}
/* The first cell sits flush with the container edge, so the row lines up with
the section head above it. */
@media (min-width: 981px) {
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item):first-child {
padding-left: 0;
}
}
@media (max-width: 980px) {
.kperf,
.proof__grid,
.psystem__grid,
.cap__cycle,
.phero__index {
grid-template-columns: 1fr;
}
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item) {
padding: 24px 0;
border-right: 0;
border-bottom: 1px solid var(--skw-cell-line);
}
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item):last-child {
border-bottom: 0;
}
}
@media (max-width: 760px) {
:is(.kperf__cell, .proof__cell, .psystem__cell, .cap__word, .phero__index-item) {
padding: 20px 0;
}
}
/* ==========================================================================
Site header, primary nav and mega menu
--------------------------------------------------------------------------
Fixed to the top. .on-light / .on-dark are toggled by assets/js/header.js
as the header passes over a band, and .has-mega-open while a panel or the
search is down.
========================================================================== */
/* The background and the blur sit on .header__inner, not on .header.
.header must stay free of backdrop-filter, filter, transform, perspective
and will-change, because any of those would make it the containing block
for its position: fixed descendants - .megabar and the full-page dim
overlays .mega::after and .search::after all live inside it and are
positioned against the viewport.
.header__inner is a full-width grid filling the whole bar, so moving the
paint there looks identical and contains none of those three. */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
transition: color 280ms var(--skw-ease-out);
}
.header.on-dark.is-scrolled .header__inner,
.header.on-dark.has-mega-open .header__inner {
background: rgba(0, 22, 36, 0.92);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: var(--skw-rule-d);
}
.header.on-light.is-scrolled .header__inner,
.header.on-light.has-mega-open .header__inner {
background: rgba(233, 233, 233, 0.95);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: var(--skw-bone-ln);
}
.header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(24px, 3vw, 48px);
padding: 22px clamp(24px, 4vw, 56px);
/* The hairline and the paint transitions moved here from .header along
with the background and the blur - see the note above. */
border-bottom: 1px solid transparent;
transition: padding 260ms var(--skw-ease-out),
background 300ms var(--skw-ease-out),
border-color 300ms var(--skw-ease-out),
backdrop-filter 300ms var(--skw-ease-out);
}
.header.is-scrolled .header__inner { padding: 14px clamp(24px, 4vw, 56px); }
.brand {
display: inline-flex; align-items: center;
height: 34px;
transition: height 260ms var(--skw-ease-out);
}
.header.is-scrolled .brand { height: 26px; }
.brand img { height: 100%; width: auto; display: block; }
.header.on-dark .brand img { filter: invert(1) brightness(1.2); transition: filter 280ms var(--skw-ease-out); }
.header.on-light .brand img { filter: none; transition: filter 280ms var(--skw-ease-out); }
.nav {
display: flex; justify-content: center; align-items: center;
gap: clamp(18px, 2.4vw, 44px);
}
.nav__item { position: static; display: inline-flex; align-items: center; gap: 2px; }
.nav__link {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 10px 0;
opacity: 0.88;
transition: opacity 160ms var(--skw-ease-out);
cursor: pointer;
background: none; border: 0;
}
.nav__link:hover { opacity: 1; }
.nav__link::after {
content: "";
position: absolute; left: 0; right: 100%; bottom: 4px;
height: 1px; background: var(--skw-live);
transition: right 360ms var(--skw-ease-out);
}
.nav__item:hover .nav__link::after,
.nav__link:hover::after,
.nav__item.is-open .nav__link::after { right: 0; }
.nav__expand {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 32px;
margin-right: -6px;
color: inherit;
opacity: 0.88;
}
.nav__expand .chev {
width: 8px; height: 8px;
opacity: 0.65;
transition: transform 240ms var(--skw-ease-out), opacity 240ms var(--skw-ease-out);
}
.nav__item:hover .nav__expand .chev,
.nav__item.is-open .nav__expand .chev { transform: rotate(180deg); opacity: 1; }
.header.on-dark .nav__expand { color: var(--skw-bone); }
.header.on-light .nav__expand { color: var(--skw-navy); }
.header.on-dark .nav__link { color: var(--skw-bone); transition: color 280ms var(--skw-ease-out), opacity 160ms var(--skw-ease-out); }
.header.on-light .nav__link { color: var(--skw-navy); transition: color 280ms var(--skw-ease-out), opacity 160ms var(--skw-ease-out); }
.nav__item.is-current .nav__link::after { right: 0; background: var(--skw-live); }
.megabar {
position: fixed;
left: 0; right: 0;
top: 90px;
pointer-events: none;
z-index: 49;
transition: top 260ms var(--skw-ease-out);
}
.header.is-scrolled .megabar { top: 74px; }
.mega {
position: absolute;
top: 0; left: 0; right: 0;
background: #001624;
border-bottom: 1px solid var(--skw-rule-d);
color: var(--skw-bone);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 260ms var(--skw-ease-out), transform 260ms var(--skw-ease-out), visibility 0s linear 260ms;
pointer-events: none;
}
.header.on-light .mega {
background: #e9e9e9;
border-bottom-color: var(--skw-bone-ln);
color: var(--skw-navy);
box-shadow: 0 24px 48px -16px rgba(0, 22, 36, 0.18);
}
.mega.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
.mega::after {
content: "";
position: fixed;
left: 0; right: 0; bottom: 0;
top: 0;
background: rgba(0, 22, 36, 0.55);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 260ms var(--skw-ease-out);
z-index: -1;
}
.mega.is-open::after { opacity: 1; }
.header.on-light .mega::after { background: rgba(233, 233, 233, 0.7); }
.mega__inner {
max-width: 90rem;
margin: 0 auto;
padding: clamp(36px, 5vh, 56px) clamp(24px, 4vw, 56px);
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
gap: clamp(56px, 7vw, 110px);
align-items: stretch;
}
.mega__media {
position: relative;
align-self: stretch;
min-height: 100%;
overflow: hidden;
background: var(--skw-navy-dp);
}
.mega__media img {
position: absolute; inset: 0;
width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
filter: saturate(0.78) contrast(1.06) brightness(0.78);
transform: scale(1.04);
transition: transform 8000ms linear;
}
.mega.is-open .mega__media img { transform: scale(1.14); }
.mega__items {
display: grid;
gap: 0;
align-content: start;
border-top: 1px solid currentColor;
border-color: var(--skw-rule-d);
}
.header.on-light .mega__items { border-color: var(--skw-bone-ln); }
.mega__item {
display: grid;
grid-template-columns: 28px 1fr;
gap: clamp(16px, 2vw, 28px);
padding: clamp(20px, 2.6vh, 28px) 4px;
border-bottom: 1px solid var(--skw-rule-d);
color: inherit;
align-items: start;
position: relative;
transition: background 200ms var(--skw-ease-out);
}
.header.on-light .mega__item { border-bottom-color: var(--skw-bone-ln); }
.mega__item:hover { background: rgba(250,250,250,0.04); }
.header.on-light .mega__item:hover { background: rgba(0,22,36,0.04); }
.mega__item-num {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--skw-mute-d);
padding-top: 6px;
}
.mega__item-body { display: flex; flex-direction: column; gap: 8px; }
.mega__items--dense .mega__item { padding: clamp(14px, 1.9vh, 20px) 4px; }
.mega__items--dense .mega__item-body { gap: 6px; }
.mega__item-title {
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 500;
letter-spacing: -0.01em;
color: inherit;
display: flex; align-items: center; gap: 14px;
}
.mega__item-title svg {
width: 14px; height: 14px;
opacity: 0;
transform: translate(-6px, 6px);
transition: opacity 220ms var(--skw-ease-out), transform 320ms var(--skw-ease-out);
}
.mega__item:hover .mega__item-title svg,
.mega__item-title:focus-visible svg {
opacity: 1; transform: translate(0, 0);
}
.mega__item-title::after { content: ""; position: absolute; inset: 0; }
.mega__sub {
list-style: none; margin: 2px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 20px;
position: relative; z-index: 1;
}
.mega__sub a {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--skw-ff-alt);
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--skw-bone);
padding: 4px 0;
transition: color 200ms var(--skw-ease-out);
}
.mega__sub a::before { content: ""; width: 10px; height: 1px; background: currentColor; opacity: 0.6; }
.mega__sub a:hover { color: var(--skw-live); }
.mega__sub a.is-current { color: inherit; }
.header.on-light .mega__sub a { color: var(--skw-navy); }
.header.on-light .mega__sub a:hover { color: var(--skw-live); }
.mega__item-desc {
font-size: 14px;
line-height: 1.5;
color: var(--skw-mute-d);
max-width: 56ch;
margin: 0;
}
.header.on-light .mega__item-desc { color: var(--skw-mute-l); }
.nav__drop { display: none; }
.nav__toggle {
display: none;
width: 44px; height: 44px;
outline: none;
-webkit-tap-highlight-color: transparent;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px;
background: none; border: 0;
cursor: pointer;
color: inherit;
}
.nav__toggle span {
display: block; width: 22px; height: 1.5px;
background: currentColor;
transition: transform 240ms var(--skw-ease-out), opacity 200ms var(--skw-ease-out);
}
.header.on-dark .nav__toggle { color: var(--skw-bone); }
.header.on-light .nav__toggle { color: var(--skw-navy); }
body.drawer-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.drawer-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.drawer-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav__toggle:focus, .nav__toggle:focus-visible, .nav__toggle:active { outline: none !important; box-shadow: none !important; }
.header__actions { display: flex; align-items: center; gap: 14px; }
.header__search {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
border: 1px solid transparent;
transition: color 200ms var(--skw-ease-out), border-color 200ms var(--skw-ease-out);
}
.header__search svg { width: 17px; height: 17px; }
.header.on-dark .header__search { color: var(--skw-bone); }
.header.on-light .header__search { color: var(--skw-navy); }
.header__search:hover, .header__search[aria-expanded="true"] { color: var(--skw-live) !important; }
.header.on-light .search { background: #e9e9e9; color: var(--skw-navy); border-bottom-color: var(--skw-bone-ln); }
.header.on-light .search::after { background: rgba(233, 233, 233, 0.7); }
.header.on-light .search__field { border-bottom-color: var(--skw-bone-ln); }
.header.on-light .sres__kicker, .header.on-light .sres__desc, .header.on-light .sres__empty { color: var(--skw-mute-l); }
.drawer__group.is-current > .drawer__top,
.drawer__sub a.is-current strong,
.mega__item.is-current .mega__item-title,
.mega__sub a.is-current {
text-decoration: underline;
text-decoration-color: var(--skw-live);
text-decoration-thickness: 1px;
text-underline-offset: 7px;
}
.header.on-dark .header__cta { background: var(--skw-bone); color: var(--skw-navy); }
.header.on-dark .header__cta:hover { background: #fff; }
.header.on-light .header__cta { background: var(--skw-navy); color: var(--skw-bone); }
.header.on-light .header__cta:hover { background: var(--skw-navy-dp); }
@media (max-width: 1100px) {
.nav { display: none; }
.header__cta { display: none; }
.nav__toggle { display: inline-flex; }
.header__inner {
grid-template-columns: auto 1fr auto;
padding: 18px clamp(24px, 4vw, 56px);
}
.header__inner > .brand { grid-column: 1; }
.header__inner > .header__actions { grid-column: 3; }
.header.is-scrolled .header__inner { padding: 12px clamp(24px, 4vw, 56px); }
.brand { height: 22px; }
.header.is-scrolled .brand { height: 20px; }
.nav__toggle { width: 44px; height: 44px; transform: translateX(11px); }
body.drawer-open .nav__toggle { transform: translateX(11px); }
.header__actions { justify-content: flex-end; }
.megabar { display: none; }
.header__search { display: none; }
}
@media (max-width: 1280px) and (min-width: 1101px) {
.mega__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 40px; }
}
/* A mega panel whose top-level menu item has no image set renders without
.mega__media. The grid still has two columns, so the items would drop into
the narrow first one and leave the wide second column empty. With nothing
beside them, they take the full width instead. */
.mega__items:only-child {
grid-column: 1 / -1;
}
/* ==========================================================================
Mobile navigation drawer
--------------------------------------------------------------------------
Opened by #navToggle below 980px. Groups collapse behind .drawer__top.
========================================================================== */
.drawer__sub a.is-current strong { color: inherit; }
.drawer {
position: fixed; inset: 0;
background: var(--skw-navy-dp);
color: var(--skw-bone);
z-index: 48;
display: none;
flex-direction: column;
padding: calc(var(--skw-header-h, 72px) + 8px) clamp(24px, 4vw, 56px) 32px;
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 300ms var(--skw-ease-out), transform 300ms var(--skw-ease-out), visibility 0s linear 300ms;
}
body.drawer-open .drawer {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
.drawer__group {
border-top: 1px solid var(--skw-rule-d);
padding: 6px 0;
}
.drawer__group:first-of-type { border-top: 0; }
.drawer__group:last-of-type { border-bottom: 1px solid var(--skw-rule-d); }
.drawer__top {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 18px 0;
background: none; border: 0; color: inherit;
font-size: 22px; font-weight: 400;
letter-spacing: -0.01em;
cursor: pointer;
}
.drawer__top .chev,
.drawer__top .arrow {
width: 14px; height: 14px;
flex: 0 0 auto;
transition: transform 240ms var(--skw-ease-out);
opacity: 0.7;
}
.drawer__group.is-open .drawer__top .chev { transform: rotate(180deg); }
.drawer__sub {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 340ms var(--skw-ease-out), visibility 0s linear 340ms;
}
.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.drawer__sub-in {
min-height: 0; overflow: hidden;
display: flex; flex-direction: column;
padding: 0 4px;
}
.drawer__sub-in::after { content: ""; flex: 0 0 14px; }
.drawer__sub a {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,0.06);
color: var(--skw-bone);
}
.drawer__sub a:first-child { border-top: 0; }
.drawer__sub a strong {
font-weight: 500; font-size: 16px;
}
.drawer__sub a > span {
font-size: 14px;
line-height: 1.45;
color: var(--skw-mute-d);
}
.drawer__top { transition: color 200ms var(--skw-ease-out); }
.drawer__cta {
margin-top: 28px;
align-self: stretch; justify-content: center;
flex-shrink: 0;
}
.drawer__search {
display: grid; grid-template-columns: 1fr auto; align-items: center;
margin: 4px 0 8px;
flex-shrink: 0;
}
.drawer__search-input {
font: inherit; font-size: 17px; color: var(--skw-bone);
background: none; border: 0; outline: none;
padding: 16px 0; min-width: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.drawer__search-input::-moz-placeholder { color: var(--skw-mute-d); }
.drawer__search-input::placeholder { color: var(--skw-mute-d); }
.drawer__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__input:focus-visible, .drawer__search-input:focus-visible { outline: none; }
.drawer__search-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; color: var(--skw-mute-d); }
.drawer__search-icon svg { width: 17px; height: 17px; }
.drawer__results:empty { display: none; }
.drawer__results { flex-shrink: 0; padding-bottom: 16px; }
.drawer__results .sres__link { padding: 14px 0; }
.drawer__results .sres__title { font-size: 18px; }
.drawer.is-searching .drawer__group, .drawer.is-searching .drawer__cta { display: none; }
.drawer__top { justify-content: flex-start; }
.drawer__top .chev, .drawer__top .arrow { margin-left: auto; }
.drawer__sub a.has-sub { padding-bottom: 8px; }
.drawer__sub a.drawer__subsub { padding: 6px 0 6px 18px; border-top: 0; }
.drawer__sub a.drawer__subsub.is-last { padding-bottom: 12px; }
.drawer__sub a.drawer__subsub strong {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--skw-ff-alt); font-weight: 400;
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--skw-bone);
transition: color 200ms var(--skw-ease-out);
}
.drawer__sub a.drawer__subsub:hover strong { color: var(--skw-live); }
.drawer__sub a.drawer__subsub strong::before { content: ""; width: 10px; height: 1px; background: currentColor; opacity: 0.6; }
.drawer__sub a.drawer__subsub.is-current strong { color: inherit; }
.search__results:not(:empty), .drawer__results:not(:empty) { animation: sw-fade-in 260ms var(--skw-ease-out) both; }
@media (max-width: 1100px) {
.drawer { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.search__results, .drawer__results { animation: none !important; }
}
/* ==========================================================================
Search panel and live results
--------------------------------------------------------------------------
The panel drops out of the megabar; the result list markup is built by
assets/js/search.js from the REST index.
========================================================================== */
.search {
position: absolute; top: 0; left: 0; right: 0;
background: #001624;
color: var(--skw-bone);
border-bottom: 1px solid var(--skw-rule-d);
opacity: 0;
transform: translateY(-8px);
transition: opacity 260ms var(--skw-ease-out), transform 260ms var(--skw-ease-out);
pointer-events: none;
}
.search.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.search::after {
content: ""; position: fixed; inset: 0; z-index: -1;
background: rgba(0, 22, 36, 0.55);
backdrop-filter: blur(2px);
opacity: 0; transition: opacity 260ms var(--skw-ease-out);
pointer-events: none;
}
.search.is-open::after { opacity: 1; }
.search__inner {
position: relative;
max-width: 90rem; margin: 0 auto;
padding: clamp(36px, 6vh, 64px) clamp(24px, 4vw, 56px) clamp(32px, 5vh, 52px);
}
.search__form { display: flex; flex-direction: column; gap: 18px; max-width: 64rem; }
.search__label { color: inherit; }
.search__field {
display: block;
border-bottom: 1px solid var(--skw-rule-ds);
padding-bottom: 14px;
transition: border-color 200ms var(--skw-ease-out);
}
.search__field:focus-within { border-bottom-color: var(--skw-live); }
.search__input {
font: inherit;
font-size: clamp(26px, 3.4vw, 48px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
color: inherit;
background: none; border: 0; outline: none;
width: 100%; min-width: 0; padding: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.search__input::-moz-placeholder { color: var(--skw-mute-d); opacity: 0.7; }
.search__input::placeholder { color: var(--skw-mute-d); opacity: 0.7; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__close {
position: absolute; top: clamp(20px, 3vh, 32px); right: clamp(24px, 4vw, 56px);
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
color: inherit; opacity: 0.7;
}
.search__close svg { width: 14px; height: 14px; }
.search__close:hover { opacity: 1; color: var(--skw-live); }
.search__results { max-width: 64rem; }
.search__results:empty { display: none; }
.search__results { margin-top: clamp(16px, 2.4vh, 28px); max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); overflow-y: auto; overscroll-behavior: contain; }
.sres { list-style: none; margin: 0; padding: 0; }
.sres__link { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; color: inherit; outline-offset: 4px; }
.sres__kicker { display: flex; gap: 12px; font-family: var(--skw-ff-alt); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--skw-mute-d); }
.sres__title { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; transition: color 200ms var(--skw-ease-out); }
.sres__desc { font-size: 14px; line-height: 1.5; color: var(--skw-mute-d); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sres__link:hover .sres__title, .sres__link:focus-visible .sres__title { color: var(--skw-live); }
.sres mark { background: none; color: inherit; font-weight: 600; }
.sres__empty { font-size: 15px; color: var(--skw-mute-d); margin: 4px 0 0; }
/* The result list fades in as it is replaced, so a re-query does not flash. */
@keyframes sw-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
Site footer
--------------------------------------------------------------------------
Call to action, three office blocks, credential badges, legal row and the
watermark. .footer__cert--sm is the shorter badge height.
========================================================================== */
.footer {
background: var(--skw-navy-dp);
color: var(--skw-bone);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 clamp(24px, 4vw, 56px);
}
.footer__inner { max-width: 90rem; margin: 0 auto; }
.footer__speak {
padding: clamp(120px, 18vh, 200px) 0 clamp(72px, 12vh, 120px);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 5vw, 96px);
align-items: end;
border-bottom: 1px solid var(--skw-rule-d);
}
.footer__speak-title {
font-weight: 600;
font-size: clamp(2.25rem, 5.4vw, 6rem);
line-height: 1.12;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
max-width: 12ch;
color: var(--skw-bone);
}
.footer__speak-title--wide { max-width: 18ch; }
.footer__speak-side {
display: flex; flex-direction: column; gap: 20px;
padding-bottom: 8px;
align-items: flex-start;
}
.footer__speak-side p {
color: var(--skw-mute-d);
font-size: 15px; line-height: 1.55;
margin: 0; max-width: 36ch;
}
.footer__speak-side .btn { align-self: flex-start; }
.footer__info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 5vw, 96px);
padding: clamp(56px, 9vh, 88px) 0;
border-bottom: 1px solid var(--skw-rule-d);
}
.footer__addr {
display: flex; flex-direction: column; gap: 14px;
max-width: 38ch;
}
.footer__addr h5 {
font-family: var(--skw-ff-alt);
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--skw-mute-d);
margin: 0;
font-weight: 400;
}
.footer__addr p {
color: var(--skw-bone);
font-size: 14px; line-height: 1.6;
margin: 0; opacity: 0.9;
}
.footer__addr a { color: inherit; }
.footer__addr a:hover { opacity: 0.7; }
.footer__addr--parent .tag {
display: inline-block;
font-family: var(--skw-ff-alt);
font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 8px;
border: 1px solid var(--skw-rule-d);
margin-left: 8px;
color: var(--skw-mute-d);
}
.footer__hairline {
display: flex;
justify-content: space-between; align-items: center;
padding: 28px 0 32px;
color: var(--skw-mute-d);
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.04em;
gap: 20px; flex-wrap: wrap;
}
.footer__legal { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer__legal > span { color: var(--skw-mute-d); }
.footer__legal a {
color: var(--skw-bone); opacity: 0.8;
transition: opacity 160ms var(--skw-ease-out), color 160ms var(--skw-ease-out);
}
.footer__legal a:hover { opacity: 1; color: var(--skw-live); }
.footer__social-links { display: flex; gap: 10px; align-items: center; }
.footer__social {
width: 36px; height: 36px; border-radius: 999px;
display: inline-flex !important; align-items: center; justify-content: center;
border: 1px solid var(--skw-rule-ds);
transition: color 200ms var(--skw-ease-out), border-color 200ms var(--skw-ease-out), opacity 160ms var(--skw-ease-out);
}
.footer__social svg { width: 14px; height: 14px; }
.footer__social:hover { border-color: var(--skw-live); }
.footer__certs .footer__social-links { margin-left: auto; }
.footer__credit { color: var(--skw-bone); opacity: 0.8; transition: opacity 160ms var(--skw-ease-out), color 160ms var(--skw-ease-out); }
.footer__credit:hover { opacity: 1; color: var(--skw-live); }
.footer__social-links a {
color: var(--skw-bone); opacity: 0.8;
transition: opacity 160ms var(--skw-ease-out), color 160ms var(--skw-ease-out);
}
.footer__social-links a:hover { opacity: 1; color: var(--skw-live); }
.footer__addr a { color: inherit; transition: color 160ms var(--skw-ease-out), opacity 160ms var(--skw-ease-out); }
.footer__addr a:hover { color: var(--skw-live); opacity: 1; }
.footer__mark {
padding: clamp(56px, 10vh, 96px) 0 clamp(24px, 4vh, 40px);
text-align: center;
line-height: 0;
}
.footer__mark img {
width: 100%;
max-width: none;
height: auto;
opacity: 0.9;
filter: invert(1) brightness(1.1);
display: inline-block;
}
.footer__certs {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 56px);
padding: clamp(28px, 5vh, 48px) 0 clamp(8px, 2vh, 16px);
border-top: 1px solid var(--skw-rule-d);
flex-wrap: wrap;
}
.footer__certs-list {
list-style: none; margin: 0; padding: 0;
display: flex;
gap: clamp(24px, 3vw, 48px);
align-items: center;
flex-wrap: wrap;
}
.footer__certs-list a { display: block; }
.footer__certs-list img {
height: 50px;
width: auto;
opacity: 0.85;
transition: opacity 200ms var(--skw-ease-out);
}
.footer__certs-list a:hover img { opacity: 1; }
.footer__info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__certs-list .footer__cert--bvlos { height: 40px; }
.footer__certs-list .footer__cert--blue { height: 40px; }
@media (max-width: 860px) {
.section__head,
.company__grid,
.cap__coda,
.footer__speak,
.footer__info { grid-template-columns: 1fr; gap: 18px; align-items: start; }
.footer__speak { padding: 32px 0 20px; gap: 14px; }
.footer__speak-side { gap: 12px; }
.footer__speak-side p { font-size: 14px; }
.footer__info { padding: 20px 0; gap: 18px; }
.footer__addr { gap: 8px; }
.footer__hairline { padding: 14px 0 18px; gap: 10px; }
.footer__mark { padding: 28px 0 18px; }
.footer__speak-title { line-height: 1.16; }
.footer__info { grid-template-columns: 1fr; }
.footer__certs { gap: 20px; padding: 24px 0 8px; }
.footer__certs-list { gap: 24px; }
.footer__certs-list img { height: 36px; }
.footer__certs-list .footer__cert--bvlos { height: 30px; }
.footer__certs-list .footer__cert--blue { height: 30px; }
.footer__certs-list { flex-basis: 100%; }
.footer__certs .footer__social-links { margin-left: 0; }
}
@media (max-width: 980px) {
.footer__info { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.footer { padding: 0 20px; }
}
/* ==========================================================================
Filter chips and empty states
--------------------------------------------------------------------------
Chip row for the listings. assets/js/filters.js toggles [hidden] on the
items and adds .is-filtered to animate the change.
========================================================================== */
.filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
padding-bottom: 18px; margin-bottom: clamp(40px, 6vh, 64px);
border-bottom: 1px solid var(--skw-bone-ln);
}
.filters__chip {
position: relative;
font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
color: var(--skw-mute-l);
padding: 10px 0;
transition: color 200ms var(--skw-ease-out);
}
.filters__chip::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 4px;
height: 1px; background: var(--skw-live);
transition: right 320ms var(--skw-ease-out);
}
.filters__chip:hover { color: var(--skw-navy); }
.filters__chip:hover::after, .filters__chip.is-active::after { right: 0; }
.filters__chip.is-active { color: var(--skw-navy); }
.filters--dark { border-bottom-color: var(--skw-rule-d); }
.filters--dark .filters__chip { color: var(--skw-mute-d); }
.filters--dark .filters__chip:hover, .filters--dark .filters__chip.is-active { color: var(--skw-bone); }
.agroup:not([hidden]) ~ .agroup:not([hidden]) { margin-top: clamp(64px, 9vh, 112px); padding-top: clamp(56px, 8vh, 96px); border-top: 1px solid var(--skw-bone-ln); }
.agroup__title {
font-weight: 600;
font-size: clamp(1.75rem, 3vw, 2.75rem);
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--skw-navy);
margin: 0 0 clamp(28px, 4vh, 48px);
}
.aempty { font-size: 16px; color: var(--skw-mute-l); margin: 0; padding: 24px 0; }
.is-filtered [data-type]:not([hidden]), .is-filtered .aempty:not([hidden]) { animation: sw-fade-up 420ms var(--skw-ease-out) both; }
.is-revealed { animation: sw-fade-up 420ms var(--skw-ease-out) both; }
@media (max-width: 760px) {
.filters { gap: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
.is-filtered [data-type], .is-filtered .aempty, .is-revealed { animation: none; }
}
/* Items re-entering the grid after a filter change, and rows revealed by the
"view more" control. */
@keyframes sw-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
Content cards
--------------------------------------------------------------------------
One card shape for news, events, case studies and search results.
========================================================================== */
.news {
background: var(--skw-bone);
color: var(--skw-navy);
padding: clamp(72px, 11vh, 130px) clamp(24px, 4vw, 56px);
}
.news__inner { max-width: 90rem; margin: 0 auto; }
.news__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3vw, 48px);
}
.news__card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.news__plate {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--skw-navy-dp);
}
.news__plate img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: saturate(0.82) contrast(1.05) brightness(0.96);
transition: transform 600ms var(--skw-ease-out);
}
.news__card:hover .news__plate img { transform: scale(1.04); }
.news__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(20px, 2vw, 28px) 0 0 0;
}
.news__date {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--skw-mute-l);
margin: 0;
}
.news__title {
font-weight: 600;
font-size: clamp(1.25rem, 1.9vw, 1.6rem);
letter-spacing: -0.02em;
line-height: 1.22;
margin: 0;
color: var(--skw-navy);
text-wrap: balance;
}
.news__excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--skw-mute-l);
margin: 0;
}
.news__more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-family: var(--skw-ff-sans);
font-weight: 500;
font-size: 14px;
color: var(--skw-navy);
}
.news__more svg {
width: 12px;
height: 12px;
transition: transform 260ms var(--skw-ease-out);
}
.news__card:hover .news__more { color: var(--skw-live); }
.news__card:hover .news__more svg { transform: translate(3px, -3px); }
.arelated .news__excerpt { display: none; }
.arelated .news__title { font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.news__badge {
position: absolute; top: 16px; left: 16px; z-index: 1;
font-family: var(--skw-ff-alt); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--skw-bone);
background: rgba(0, 22, 36, 0.78);
padding: 6px 10px;
}
.news__badge--end { left: auto; right: 16px; }
.news__date { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 1100px) {
.news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.news { padding: 32px 0; }
.news__inner { padding: 0 20px; }
.news__grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ==========================================================================
Page heroes
--------------------------------------------------------------------------
Five hero layouts: .mhero split, .ovhero centered, .lhero minimal,
.phero over an image and .ahero for articles and credentials.
========================================================================== */
.phero {
position: relative;
min-height: 100vh;
background: var(--skw-navy-dp);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: calc(var(--skw-header-h, 72px) + 24px) clamp(24px, 4vw, 56px) clamp(56px, 8vh, 96px);
}
.phero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.phero__bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 38%;
object-position: 50% 38%;
filter: saturate(0.78) contrast(1.08) brightness(0.62);
}
.phero__bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,22,36,0.30) 0%, rgba(0,22,36,0) 26%, rgba(0,22,36,0) 52%, rgba(0,22,36,0.78) 100%), linear-gradient(90deg, rgba(0,22,36,0.55) 0%, rgba(0,22,36,0) 60%);
z-index: 1;
}
.phero__inner {
position: relative;
z-index: 3;
width: 100%;
max-width: 90rem;
margin: 0 auto;
color: var(--skw-bone);
}
.phero__crumbs {
position: absolute;
top: calc(var(--skw-header-h, 72px) + 28px);
left: clamp(24px, 4vw, 56px);
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(250,250,250,0.62);
margin: 0;
}
.phero__crumbs a:hover { color: var(--skw-live); }
.phero__crumbs span[aria-hidden] { opacity: 0.4; }
.phero__crumbs [aria-current] { color: var(--skw-bone); }
.phero__label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(250,250,250,0.85);
font-weight: 400;
margin-bottom: 28px;
}
.phero__label::before {
content: "";
width: 6px;
height: 6px;
background: var(--skw-live);
flex-shrink: 0;
}
.phero__headline {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.25rem, 6.4vw, 6.5rem);
line-height: 1.08;
letter-spacing: -0.035em;
margin: 0 0 28px 0;
color: var(--skw-bone);
max-width: 14ch;
text-wrap: balance;
}
.phero__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.55;
color: rgba(250,250,250,0.78);
max-width: 48ch;
margin: 0 0 56px 0;
}
.phero__index {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 720px;
}
.phero__index-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: relative;
}
.phero__index-num {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(250,250,250,0.5);
}
.phero__index-name {
font-size: 18px;
font-weight: 500;
color: var(--skw-bone);
}
.phero__index-tag {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--skw-live);
margin-left: auto;
}
.phero__index-item:hover .phero__index-name { color: var(--skw-live); }
.phero--cta .phero__bg img { -o-object-position: 50% 42%; object-position: 50% 42%; }
.phero--cta .phero__headline { max-width: 18ch; }
.phero--cta .phero__lede { max-width: 52ch; margin-bottom: 36px; }
.phero__cta-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs { flex-wrap: wrap; row-gap: 6px; }
:is(.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs) > * { white-space: nowrap; }
.phero__crumbs { right: clamp(24px, 4vw, 56px); }
.mhero {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(64px, 12vh, 140px)) clamp(24px, 4vw, 56px) clamp(80px, 14vh, 140px);
overflow: hidden;
isolation: isolate;
}
.mhero__inner {
position: relative;
z-index: 2;
max-width: 90rem;
margin: 0 auto;
}
.mhero__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--skw-mute-d);
margin: 0 0 clamp(56px, 10vh, 104px);
}
.mhero__crumbs a { color: var(--skw-mute-d); text-decoration: none; }
.mhero__crumbs a:hover { color: var(--skw-live); }
.mhero__crumbs span[aria-hidden] { opacity: 0.4; }
.mhero__crumbs [aria-current] { color: var(--skw-bone); }
.mhero__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
}
.mhero__headline {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.5rem, 6vw, 5.5rem);
letter-spacing: -0.03em;
line-height: 1.04;
margin: 16px 0 0;
color: var(--skw-bone);
max-width: 16ch;
text-wrap: balance;
}
.mhero__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.6;
color: var(--skw-mute-d);
margin: 0 0 8px;
max-width: 48ch;
}
.mhero__side {
display: flex;
flex-direction: column;
gap: 24px;
}
.mhero__press {
display: flex;
flex-direction: column;
font-size: clamp(15px, 1vw, 17px);
line-height: 1.6;
color: var(--skw-mute-d);
margin: 0 0 8px;
}
.mhero__press a {
align-self: flex-start;
color: var(--skw-bone);
font-weight: 600;
border-bottom: 1px solid var(--skw-rule-ds);
transition: color 220ms var(--skw-ease-out), border-color 220ms var(--skw-ease-out);
}
.mhero__press a:hover { color: var(--skw-live); border-color: var(--skw-live); }
.ovhero {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(64px, 12vh, 140px)) clamp(24px, 4vw, 56px) clamp(48px, 8vh, 80px);
overflow: hidden;
isolation: isolate;
}
.ovhero__inner {
position: relative;
z-index: 2;
max-width: 90rem;
margin: 0 auto;
}
.ovhero__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--skw-mute-d);
margin: 0 0 clamp(40px, 8vh, 72px);
}
.ovhero__crumbs a { color: var(--skw-mute-d); text-decoration: none; }
.ovhero__crumbs a:hover { color: var(--skw-live); }
.ovhero__crumbs span[aria-hidden] { opacity: 0.4; }
.ovhero__crumbs [aria-current] { color: var(--skw-bone); }
.ovhero__headline {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.5rem, 6vw, 5.5rem);
letter-spacing: -0.03em;
line-height: 1.04;
margin: 16px 0 0;
color: var(--skw-bone);
max-width: 16ch;
text-wrap: balance;
}
.ovhero__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.6;
color: var(--skw-mute-d);
margin: 20px 0 0;
max-width: 54ch;
}
.lhero {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(56px, 11vh, 120px)) clamp(24px, 4vw, 56px) clamp(48px, 8vh, 80px);
overflow: hidden;
isolation: isolate;
}
.lhero__inner {
position: relative;
z-index: 2;
max-width: 64rem;
margin: 0 auto;
}
.lhero__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--skw-mute-d);
margin: 0 0 clamp(36px, 7vh, 64px);
}
.lhero__crumbs a { color: var(--skw-mute-d); text-decoration: none; }
.lhero__crumbs a:hover { color: var(--skw-live); }
.lhero__crumbs span[aria-hidden] { opacity: 0.4; }
.lhero__crumbs [aria-current] { color: var(--skw-bone); }
.lhero__title {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.25rem, 5vw, 4rem);
letter-spacing: -0.03em;
line-height: 1.06;
margin: 16px 0 0;
color: var(--skw-bone);
text-wrap: balance;
}
.lhero__meta {
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--skw-mute-d);
margin: 20px 0 0;
}
.chero {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(56px, 10vh, 110px)) clamp(24px, 4vw, 56px) clamp(80px, 12vh, 140px);
overflow: hidden;
isolation: isolate;
}
.chero__inner {
position: relative;
z-index: 2;
max-width: 90rem;
margin: 0 auto;
}
.chero__crumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--skw-mute-d);
margin: 0 0 clamp(40px, 7vh, 80px);
}
.chero__crumbs a { color: var(--skw-mute-d); text-decoration: none; }
.chero__crumbs a:hover { color: var(--skw-live); }
.chero__crumbs span[aria-hidden] { opacity: 0.4; }
.chero__crumbs [aria-current] { color: var(--skw-bone); }
.chero__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.chero__lead {
display: flex;
flex-direction: column;
gap: clamp(20px, 3vh, 32px);
}
.chero__headline {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.25rem, 5vw, 4.25rem);
letter-spacing: -0.03em;
line-height: 1.04;
margin: 0;
color: var(--skw-bone);
max-width: 14ch;
text-wrap: balance;
}
.chero__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.6;
color: var(--skw-mute-d);
margin: 0;
max-width: 48ch;
}
.chero__essentials {
margin-top: clamp(16px, 3vh, 28px);
padding-top: clamp(20px, 3vh, 32px);
border-top: 1px solid var(--skw-rule-d);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 48px);
}
.chero__essential {
display: flex;
flex-direction: column;
gap: 6px;
}
.chero__essential-lbl {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--skw-mute-d);
}
.chero__essential-val {
font-size: 15px;
line-height: 1.55;
color: var(--skw-bone);
margin: 0;
}
.chero__essential-val a { color: var(--skw-bone); text-decoration: none; transition: color 200ms var(--skw-ease-out); }
.chero__essential-val a:hover { color: var(--skw-live); }
.phero__headline .phero__label { display: flex; width: -moz-fit-content; width: fit-content; line-height: 1.2; letter-spacing: 0.06em; }
.phero__index--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.ahero {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(56px, 10vh, 112px)) clamp(24px, 4vw, 56px) clamp(140px, 22vh, 220px);
overflow: hidden;
isolation: isolate;
}
.ahero__inner { position: relative; z-index: 2; max-width: 90rem; margin: 0 auto; }
.ahero .mhero__crumbs { margin-bottom: clamp(48px, 8vh, 88px); flex-wrap: nowrap; min-width: 0; }
.ahero .mhero__crumbs a { flex-shrink: 0; }
.ahero .mhero__crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ahero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 22px; }
.ahero__meta time, .ahero__meta span.ahero__info {
font-family: var(--skw-ff-alt); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--skw-mute-d);
}
.ahero__title {
font-weight: 600;
font-size: clamp(2rem, 4.4vw, 4.25rem);
line-height: 1.08;
letter-spacing: -0.03em;
margin: 0;
max-width: 24ch;
text-wrap: balance;
}
.ahero__lede { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--skw-mute-d); margin: 28px 0 0; max-width: 62ch; }
.ahero__cta { margin-top: 32px; }
.thero__plate { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.thero__plate img { width: calc(var(--skw-logo-w, 40%) * 1.2); height: auto; }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.ahero--plain { padding-bottom: clamp(72px, 12vh, 120px); }
:is(.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs) a { transition: color 200ms var(--skw-ease-out); }
.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
gap: 10px;
color: rgba(250, 250, 250, 0.62);
}
:is(.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs) a { color: rgba(250, 250, 250, 0.62); }
:is(.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs) a:hover { color: var(--skw-live); }
:is(.phero__crumbs, .mhero__crumbs, .ovhero__crumbs, .chero__crumbs, .lhero__crumbs) [aria-current] { color: var(--skw-bone); }
.phero { padding-top: calc(var(--skw-header-h, 72px) + var(--skw-crumb-top) + 64px); }
.phero__crumbs {
top: calc(var(--skw-header-h, 72px) + var(--skw-crumb-top));
left: max(clamp(24px, 4vw, 56px), calc((100% - 90rem) / 2));
right: max(clamp(24px, 4vw, 56px), calc((100% - 90rem) / 2));
}
.mhero, .ovhero, .lhero, .chero, .ahero { padding-top: calc(var(--skw-header-h, 72px) + var(--skw-crumb-top)); }
.mhero__crumbs { margin-bottom: calc(clamp(64px, 12vh, 140px) - var(--skw-crumb-top) + clamp(56px, 10vh, 104px)); }
.ovhero__crumbs { margin-bottom: calc(clamp(64px, 12vh, 140px) - var(--skw-crumb-top) + clamp(40px, 8vh, 72px)); }
.lhero__crumbs { margin-bottom: calc(clamp(56px, 11vh, 120px) - var(--skw-crumb-top) + clamp(36px, 7vh, 64px)); }
.chero__crumbs { margin: 0 0 calc(clamp(56px, 10vh, 110px) - var(--skw-crumb-top) + clamp(40px, 7vh, 80px)); }
.ahero .mhero__crumbs { margin-bottom: calc(clamp(56px, 10vh, 112px) - var(--skw-crumb-top) + clamp(48px, 8vh, 88px)); }
.ahero--image { min-height: 100vh; display: flex; overflow: hidden; isolation: isolate; padding-bottom: clamp(56px, 8vh, 96px); }
.ahero__bg { position: absolute; inset: 0; z-index: 0; }
.ahero__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ahero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,22,36,0.30) 0%, rgba(0,22,36,0) 26%, rgba(0,22,36,0) 52%, rgba(0,22,36,0.78) 100%), linear-gradient(90deg, rgba(0,22,36,0.55) 0%, rgba(0,22,36,0) 60%); }
.ahero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 22, 36, 0.4); }
.ahero--image .ahero__inner { display: flex; flex-direction: column; width: 100%; }
.ahero__content { margin-top: auto; }
.ahero--image .ahero__lede { color: var(--skw-bone); }
.ahero--image + .abody { padding-top: clamp(64px, 9vh, 112px); }
@media (max-width: 980px) {
.phero {
min-height: 100vh;
padding-top: calc(var(--skw-header-h, 72px) + 64px);
padding-bottom: 56px;
}
.phero__crumbs { top: calc(var(--skw-header-h, 72px) + 16px); }
.phero__headline { font-size: clamp(2.5rem, 8vw, 5.5rem); }
.phero__lede { margin-bottom: 40px; }
.phero--cta .phero__lede { margin-bottom: 28px; }
.ahero__grid { grid-template-columns: 1fr; }
.thero__plate { max-width: 420px; }
}
@media (max-width: 560px) {
.phero__headline { font-size: clamp(28px, 9vw, 40px); }
.phero__headline .phero__label { margin-bottom: 18px; }
}
@media (max-width: 1100px) {
.mhero__grid { grid-template-columns: 1fr; gap: 24px; }
.mhero__lede { max-width: 60ch; }
.chero__grid { grid-template-columns: 1fr; gap: 40px; }
.chero__essentials { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.mhero { padding: calc(var(--skw-header-h, 72px) + 56px) 20px 56px; }
.mhero__crumbs { margin-bottom: 32px; }
.mhero__headline { font-size: clamp(2.25rem, 9vw, 3rem); }
.mhero__lede { font-size: 15px; }
.ovhero { padding: calc(var(--skw-header-h, 72px) + 56px) 20px 32px; }
.ovhero__crumbs { margin-bottom: 28px; }
.ovhero__headline { font-size: clamp(2.25rem, 9vw, 3rem); }
.lhero { padding: calc(var(--skw-header-h, 72px) + 56px) 20px 32px; }
.lhero__crumbs { margin-bottom: 28px; }
.chero { padding: calc(var(--skw-header-h, 72px) + 56px) 20px 56px; }
.chero__crumbs { margin: 0 0 32px; }
.chero__lead { gap: 18px; }
.chero__essentials {
margin-top: 16px;
padding-top: 20px;
grid-template-columns: 1fr;
gap: 16px;
}
.chero__grid { gap: 32px; }
.ahero { padding: calc(var(--skw-header-h, 72px) + 48px) 20px 120px; }
.ahero .mhero__crumbs { margin-bottom: 32px; }
.ahero--plain { padding-bottom: 56px; }
.phero { padding-left: 20px; padding-right: 20px; }
.phero__crumbs { left: 20px; right: 20px; }
.mhero, .ovhero, .lhero, .chero, .ahero { padding-top: calc(var(--skw-header-h, 72px) + var(--skw-crumb-top)); }
.mhero__crumbs { margin-bottom: calc(56px - var(--skw-crumb-top) + 32px); }
.ovhero__crumbs, .lhero__crumbs { margin-bottom: calc(56px - var(--skw-crumb-top) + 28px); }
.chero__crumbs { margin: 0 0 calc(56px - var(--skw-crumb-top) + 32px); }
.ahero .mhero__crumbs { margin-bottom: calc(48px - var(--skw-crumb-top) + 32px); }
.ahero--image { padding-bottom: 48px; }
.ahero--image + .abody { padding-top: 48px; }
}
/* ==========================================================================
404 page
--------------------------------------------------------------------------
Full-bleed image with the error copy over it.
========================================================================== */
.notfound {
position: relative;
background: var(--skw-navy-dp);
color: var(--skw-bone);
padding: calc(var(--skw-header-h, 72px) + clamp(80px, 18vh, 160px)) clamp(24px, 4vw, 56px) clamp(96px, 18vh, 160px);
overflow: hidden;
isolation: isolate;
min-height: 80vh;
display: flex;
align-items: center;
}
.notfound__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.notfound__bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 40%;
object-position: center 40%;
filter: saturate(0.78) contrast(1.08) brightness(0.55);
}
.notfound__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,22,36,0.30) 0%, rgba(0,22,36,0) 26%, rgba(0,22,36,0) 52%, rgba(0,22,36,0.78) 100%), linear-gradient(90deg, rgba(0,22,36,0.55) 0%, rgba(0,22,36,0) 60%);
}
.notfound__inner {
position: relative;
z-index: 2;
max-width: 90rem;
margin: 0 auto;
width: 100%;
}
.notfound__code {
display: inline-block;
font-family: var(--skw-ff-alt);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--skw-mute-d);
margin: 0 0 24px;
}
.notfound__code::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: var(--skw-live);
margin-right: 12px;
vertical-align: 2px;
}
.notfound__headline {
font-family: var(--skw-ff-sans);
font-weight: 600;
font-size: clamp(2.5rem, 6vw, 5.5rem);
letter-spacing: -0.03em;
line-height: 1.04;
margin: 0 0 24px;
color: var(--skw-bone);
max-width: 16ch;
text-wrap: balance;
}
.notfound__lede {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.6;
color: var(--skw-mute-d);
margin: 0 0 40px;
max-width: 56ch;
}
.notfound__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 760px) {
.notfound { padding: calc(var(--skw-header-h, 72px) + 56px) 20px 56px; min-height: 70vh; }
}
/* ==========================================================================
WordPress admin bar
--------------------------------------------------------------------------
Core pushes the document down with html { margin-top: 32px !important },
which moves everything in normal flow. Position-fixed elements are placed
against the viewport rather than the document, so they ignore that margin
entirely and would sit underneath the bar.
Four things in this theme are fixed to the top: the header, the megabar
below it, the mobile drawer and the skip link. The search panel is absolute
inside the megabar, so it follows along without a rule of its own.
The offset is a custom property rather than a literal, because the bar does
not behave the same at every width:
>= 783px the bar is position: fixed and 32px tall, so the offset is
constant
<= 782px the bar is position: absolute and 46px tall, so it scrolls out
of view - a constant offset would leave a 46px gap under the
header as soon as the page moved
assets/js/header.js keeps the property in step with the scroll position in
that second case. The values here are the no-JavaScript starting point.
========================================================================== */
body.admin-bar {
--skw-adminbar-h: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar {
--skw-adminbar-h: 46px;
}
}
body.admin-bar .header {
top: var(--skw-adminbar-h, 0px);
}
/* The megabar hangs below the header, so it carries the same offset on top of
its own resting and scrolled positions. */
body.admin-bar .megabar {
top: calc(90px + var(--skw-adminbar-h, 0px));
}
body.admin-bar .header.is-scrolled .megabar {
top: calc(74px + var(--skw-adminbar-h, 0px));
}
/* The drawer is inset: 0. Overriding top alone leaves bottom at 0, so the
panel shortens rather than overflowing the viewport. */
body.admin-bar .drawer {
top: var(--skw-adminbar-h, 0px);
}
body.admin-bar .skip-link:focus {
top: calc(12px + var(--skw-adminbar-h, 0px));
}
/* An in-page anchor has to clear the bar as well as the header. */
body.admin-bar {
--skw-anchor-offset: calc(88px + var(--skw-adminbar-h, 0px));
}
/* Blocks ----------------------------------------------------------------- */
/* ==========================================================================
Block: hero-home
--------------------------------------------------------------------------
The full-height opening section. Not a .sx section: it sets its own
full-viewport height and padding rather than the shared rhythm.
Three layers stack under the content, all behind .hero__inner:
.hero__video the looping background video, with its two gradient veils
.hero__bg the still fallback, used when no video is chosen
.hero__grain the animated noise overlay
The headline animates per line: .line clips, and the span inside it rises
into place on a stagger.
========================================================================== */
.hero {
position: relative;
height: 100vh;
min-height: 720px;
color: var(--skw-bone);
overflow: hidden;
isolation: isolate;
background: var(--skw-navy-dp);
padding: calc(var(--skw-header-h, 72px) + 24px) clamp(24px, 4vw, 56px) clamp(56px, 8vh, 96px);
display: flex;
align-items: flex-end;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
margin: 0 calc(-1 * clamp(24px, 4vw, 56px));
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 2400ms var(--skw-ease-in-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
width: 100%; height: 160%;
position: absolute; top: -30%; left: 0;
-o-object-fit: cover;
object-fit: cover;
filter: saturate(0.78) contrast(1.06) brightness(0.78);
transform: scale(1.0);
transition: transform 12000ms linear;
will-change: translate;
}
.hero__slide.is-active img {
transform: scale(1.10);
}
.hero__bg::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,22,36,0.55) 0%, rgba(0,22,36,0.30) 30%, rgba(0,22,36,0.40) 60%, rgba(0,22,36,0.88) 100%),
linear-gradient(90deg, rgba(0,22,36,0.55) 0%, rgba(0,22,36,0.1) 55%, rgba(0,22,36,0.2) 100%);
z-index: 1;
}
.hero__grain {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: grainshift 6s steps(6) infinite;
}
.hero__inner {
position: relative; z-index: 3;
width: 100%;
max-width: 90rem;
margin: 0 auto;
}
.hero__stage {
display: flex; flex-direction: column;
gap: clamp(28px, 4.5vh, 48px);
max-width: 1100px;
}
.hero__label {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
display: inline-flex; align-items: center; gap: 12px;
opacity: 0;
animation: fadeIn 800ms var(--skw-ease-out) 400ms forwards;
}
.hero__label::before {
content: "";
width: 6px; height: 6px;
background: var(--skw-live);
display: inline-block;
}
.hero__headline {
font-weight: 600;
font-size: clamp(2.25rem, 6.4vw, 6.5rem);
line-height: 1.08;
letter-spacing: -0.035em;
margin: 0;
text-wrap: balance;
max-width: 14ch;
color: #fff;
}
.hero__headline .line { display: block; overflow: hidden; }
.hero__headline .line > span {
display: inline-block;
transform: translateY(101%);
animation: rise 1100ms var(--skw-ease-out) forwards;
}
.hero__headline .line:nth-child(1) > span { animation-delay: 550ms; }
.hero__headline .line:nth-child(2) > span { animation-delay: 680ms; }
.hero__headline .line:nth-child(3) > span { animation-delay: 810ms; }
.hero__lede {
max-width: 48ch;
font-size: clamp(15px, 1vw, 17px);
line-height: 1.55;
color: rgba(255,255,255,0.78);
margin: 0;
opacity: 0;
animation: fadeIn 800ms var(--skw-ease-out) 1100ms forwards;
}
.hero__ctas {
display: flex; gap: 12px; flex-wrap: wrap;
opacity: 0;
animation: fadeIn 800ms var(--skw-ease-out) 1250ms forwards;
}
.hero__video {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: var(--skw-navy-dp);
margin: 0 calc(-1 * clamp(24px, 4vw, 56px));
}
.hero__video iframe,
.hero__video video {
position: absolute;
top: 50%; left: 50%;
width: 100vw; height: 56.25vw;
min-width: 177.78vh; min-height: 100vh;
transform: translate(-50%, -50%) scale(1.05);
border: 0;
pointer-events: none;
-o-object-fit: cover;
object-fit: cover;
}
.hero__video::before,
.hero__video::after {
content: "";
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
}
.hero__video::before {
background:
linear-gradient(180deg,
rgba(0, 22, 36, 0.55) 0%,
rgba(0, 22, 36, 0.35) 35%,
rgba(0, 22, 36, 0.55) 100%);
mix-blend-mode: multiply;
}
.hero__video::after {
background:
radial-gradient(ellipse 120% 80% at 50% 30%,
rgba(0, 22, 36, 0) 0%,
rgba(0, 22, 36, 0.25) 60%,
rgba(0, 22, 36, 0.55) 100%),
linear-gradient(180deg,
rgba(0, 22, 36, 0) 40%,
rgba(0, 22, 36, 0.45) 85%,
rgba(0, 22, 36, 0.65) 100%);
}
@media (max-width: 860px) {
.hero { min-height: 520px; }
.hero__lede { font-size: 16px; }
.hero__headline { line-height: 1.12; }
.hero__video iframe {
min-width: 100vw;
min-height: 56.25vw;
width: 177.78vh;
height: 100vh;
}
}
@media (max-width: 980px) {
.hero__headline { font-size: clamp(2.5rem, 8vw, 5.5rem); }
}
@media (max-width: 560px) {
.hero__headline { font-size: clamp(28px, 9vw, 40px); }
}
/* --------------------------------------------------------------------------
Entrance animation
-------------------------------------------------------------------------- */
@keyframes grainshift {
0% { transform: translate(0, 0); }
16% { transform: translate(-2%, 1%); }
33% { transform: translate(1%, -2%); }
50% { transform: translate(-1%, 2%); }
66% { transform: translate(2%, 1%); }
83% { transform: translate(-2%, -1%); }
100% { transform: translate(0, 0); }
}
@keyframes rise {
from { transform: translateY(101%); }
to { transform: translateY(0); }
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* The source design hard-coded a delay for three lines. The headline is a
repeater now, so the stagger continues for any further lines rather than
letting them all arrive at once. */
.hero__headline .line:nth-child(4) > span { animation-delay: 940ms; }
.hero__headline .line:nth-child(5) > span { animation-delay: 1070ms; }
.hero__headline .line:nth-child(6) > span { animation-delay: 1200ms; }
/* These are CSS animations with no JavaScript behind them, so they run and
settle on their own. Only .reveal is gated on .js-anim (components/
section.css), because that one does need an observer to finish it. */
/* ==========================================================================
Block: numbered-columns
--------------------------------------------------------------------------
A row of numbered columns divided by hairlines. The numbers settle out of
random digits as the row reveals (data-scramble, assets/js/reveal.js).
The block is named for its structure, but the class names are the source
design's - .cap, from the capability section it first appeared in - because
the ported stylesheet is keyed to them.
Two layouts:
default equal columns, read as a set
--flow the same, with an arrow drawn between the columns so it reads
as a sequence. The arrow sits on the band colour, so it has a
background of its own to punch through the grid line.
Two bands: .band-light on the bone surface, .cap--dark on the deepest navy.
The section padding and the inner container come from .sx / .sx-wrap; only
the head margin is set here, because this section uses a taller gap than
the others.
========================================================================== */
.cap__head { margin-bottom: clamp(72px, 12vh, 120px); }
.cap__cycle {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cap__word {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
transition: opacity 260ms var(--skw-ease-out);
}
.cap__word .num {
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--skw-mute-l);
/* Tabular figures, so the width does not jitter while the digits scramble. */
font-variant-numeric: tabular-nums;
}
.cap__word h3 {
font-weight: 600;
font-size: clamp(1.75rem, 3.3vw, 3rem);
letter-spacing: -0.028em;
line-height: 1.18;
margin: 0;
color: var(--skw-navy);
}
.cap__word p {
font-size: 16px;
line-height: 1.55;
color: var(--skw-mute-l);
margin: 0;
max-width: 32ch;
}
/* --------------------------------------------------------------------------
Flow layout
-------------------------------------------------------------------------- */
.cap__cycle--flow,
.cap__cycle--flow .cap__word {
position: relative;
}
.cap__flow-arrow {
position: absolute;
z-index: 1;
top: 0;
right: -15px;
width: 18px;
height: 14px;
padding: 0 6px;
box-sizing: content-box;
transform: translateY(-50%);
/* Matches the light band, so the arrow sits in a gap in the grid rule
rather than on top of it. */
background: #e9e9e9;
color: var(--skw-mute-l);
pointer-events: none;
}
.cap--dark .cap__flow-arrow {
background: var(--skw-navy-dp);
color: var(--skw-mute-d);
}
.cap__cycle--flow .cap__word h3 {
font-size: clamp(1.375rem, 2.2vw, 2.5rem);
overflow-wrap: normal;
hyphens: manual;
}
/* --------------------------------------------------------------------------
Dark band
-------------------------------------------------------------------------- */
.cap--dark {
background: var(--skw-navy-dp);
color: var(--skw-bone);
}
.cap--dark .cap__word h3 { color: var(--skw-bone); }
.cap--dark .cap__word p,
.cap--dark .cap__word .num { color: var(--skw-mute-d); }
/* --------------------------------------------------------------------------
Coda
An optional closing note under the row. Styled in the source design but
never placed in its markup; the block offers it as an optional field.
-------------------------------------------------------------------------- */
.cap__coda {
margin-top: clamp(56px, 9vh, 96px);
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(24px, 4vw, 80px);
align-items: start;
padding-top: clamp(40px, 6vh, 64px);
border-top: 1px solid var(--skw-bone-ln);
}
.cap__coda h4 {
font-weight: 600;
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0;
color: var(--skw-navy);
max-width: 18ch;
}
.cap__coda p {
font-size: 15px;
line-height: 1.55;
color: var(--skw-mute-l);
margin: 0;
max-width: 56ch;
}
.cap--dark .cap__coda { border-top-color: var(--skw-rule-d); }
.cap--dark .cap__coda h4 { color: var(--skw-bone); }
.cap--dark .cap__coda p { color: var(--skw-mute-d); }
/* A downloads section directly after this one needs a rule between them,
because both sit on the same bone surface. */
.cap.band-light + .pdown.band-light { border-top: 1px solid var(--skw-bone-ln); }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.cap__flow-arrow { display: none; }
}
@media (max-width: 860px) {
.cap__word { gap: 8px; }
.cap__word p { line-height: 1.5; }
.cap__word h3 { line-height: 1.2; }
}
@media (max-width: 760px) {
.cap__head { margin-bottom: 28px; gap: 16px; }
}
/* ==========================================================================
Block: card-grid
--------------------------------------------------------------------------
A grid of large linked cards. Each is an image plate with a number and an
arrow laid over it, and a title and line of text beneath.
The class names are the source design's: .pillar for a card, and two
section wrappers that are not interchangeable.
.products a normal section on the dark band, with the shared .sx
rhythm. Used where the grid is one section among several.
.ov a hub wrapper with deliberately asymmetric padding - very
little on top, a lot underneath - because it sits directly
below a centred hero and has no head of its own. It keeps
its own padding and does NOT take .sx.
Grid variants:
.pillars--5 five across, for a row of equal items
.pillars--hub a six-column grid where a card spans two and a large
card spans three, so two large cards and three normal
ones tile into two rows
========================================================================== */
.products {
background: var(--skw-navy-dp);
color: var(--skw-bone);
}
.products__head { margin-bottom: clamp(72px, 11vh, 110px); }
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
-moz-column-gap: clamp(24px, 3vw, 48px);
column-gap: clamp(24px, 3vw, 48px);
row-gap: 0;
}
.pillar {
display: flex;
flex-direction: column;
gap: 0;
transition: opacity 300ms var(--skw-ease-out);
cursor: pointer;
}
.pillar__plate {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--skw-navy-dp);
}
.pillar__plate img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
/* Starts fractionally over-scaled so the hover zoom has no visible seam
at the edges. */
transform: scale(1.01);
transition:
transform 900ms var(--skw-ease-out),
filter 600ms var(--skw-ease-out);
filter: saturate(0.82) contrast(1.05) brightness(0.88);
}
.pillar:hover .pillar__plate img {
transform: scale(1.05);
filter: saturate(0.9) contrast(1.08) brightness(0.95);
}
.pillar__meta {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-start;
font-family: var(--skw-ff-alt);
font-size: 14px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.95);
font-variant-numeric: tabular-nums;
}
.pillar__meta .arrow {
width: 14px;
height: 14px;
opacity: 0.65;
transition:
transform 300ms var(--skw-ease-out),
opacity 300ms var(--skw-ease-out);
}
.pillar:hover .pillar__meta .arrow {
transform: translate(3px, -3px);
opacity: 1;
}
.pillar__body {
padding: clamp(20px, 2vw, 28px) 0 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pillar__title {
font-weight: 600;
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
letter-spacing: -0.022em;
line-height: 1.2;
margin: 0;
color: var(--skw-bone);
}
.pillar__desc {
font-size: 16px;
line-height: 1.55;
color: var(--skw-mute-d);
margin: 0;
max-width: 36ch;
}
/* --------------------------------------------------------------------------
Hub wrapper
-------------------------------------------------------------------------- */
.ov {
background: var(--skw-navy-dp);
padding: clamp(8px, 1vh, 16px) clamp(24px, 4vw, 56px) clamp(72px, 11vh, 130px);
}
.ov .pillars {
grid-template-columns: repeat(4, 1fr);
-moz-column-gap: clamp(20px, 2.2vw, 36px);
column-gap: clamp(20px, 2.2vw, 36px);
}
.ov .pillars--hub {
grid-template-columns: repeat(6, minmax(0, 1fr));
-moz-column-gap: clamp(20px, 2.2vw, 36px);
column-gap: clamp(20px, 2.2vw, 36px);
row-gap: clamp(48px, 6vw, 72px);
}
.pillars--hub .pillar { grid-column: span 2; }
.pillars--hub .pillar--lg { grid-column: span 3; }
.pillars--hub .pillar__plate { aspect-ratio: 4 / 3; }
.pillars--hub .pillar--lg .pillar__plate { aspect-ratio: 16 / 10; }
.pillars--hub .pillar--lg .pillar__title { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.ov.band-light {
background: var(--skw-bone-w);
padding-top: clamp(64px, 10vh, 112px);
}
.ov.band-light .pillar__title { color: var(--skw-navy); }
.ov.band-light .pillar__desc { color: var(--skw-mute-l); }
/* --------------------------------------------------------------------------
Five across
-------------------------------------------------------------------------- */
.pillars--5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
-moz-column-gap: clamp(16px, 1.6vw, 28px);
column-gap: clamp(16px, 1.6vw, 28px);
}
.pillars--5 .pillar__title { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
.pillars--5 .pillar__desc { font-size: 15px; }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.pillars { grid-template-columns: 1fr; }
.ov .pillars { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
.ov .pillars--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
.pillars--hub .pillar,
.pillars--hub .pillar--lg { grid-column: span 1; }
.pillars--hub .pillar--lg .pillar__plate { aspect-ratio: 4 / 3; }
/* An odd number of cards leaves a gap in a two-column grid, so the last
one runs the full width rather than sitting alone. */
.pillars--hub .pillar:last-child:nth-child(odd) { grid-column: span 2; }
.pillars--hub .pillar:last-child:nth-child(odd) .pillar__plate { aspect-ratio: 21 / 9; }
.pillars--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 860px) {
.pillars { row-gap: 24px; }
.pillar__body { padding-top: 14px; gap: 10px; }
.pillar__title { line-height: 1.24; }
}
@media (max-width: 760px) {
.ov { padding: 0 20px 32px; }
.ov.band-light { padding-top: 40px; padding-bottom: 48px; }
}
@media (max-width: 600px) {
.ov .pillars { grid-template-columns: 1fr; row-gap: 24px; }
.ov .pillars--hub { grid-template-columns: 1fr; row-gap: 28px; }
.pillars--hub .pillar:last-child:nth-child(odd) { grid-column: span 1; }
.pillars--hub .pillar:last-child:nth-child(odd) .pillar__plate { aspect-ratio: 4 / 3; }
.pillars--5 { grid-template-columns: 1fr; row-gap: 24px; }
}
/* ==========================================================================
Block: stat-row
--------------------------------------------------------------------------
A row of large figures with a caption under each - "2022 / in frontline
use since", "500+ / missions flown".
The cells, their hairline dividers and the stack below 980px all come from
components/cell-grid.css, which this shares with the key-performance
figures, the system grid and the capability columns. Only the typography
is here.
A value is split into the number and its unit because they are set
differently: the unit on this block matches the number's size, where the
key-performance figures inside a product overview set it much smaller.
The section padding and container come from .sx / .sx-wrap.
========================================================================== */
.proof__head { margin-bottom: clamp(72px, 11vh, 110px); }
.proof__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof__cell {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.proof__val {
font-size: clamp(2.5rem, 5.5vw, 5rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
/* Tabular figures so a row of numbers lines up on the baseline grid. */
font-variant-numeric: tabular-nums;
color: var(--skw-navy);
display: flex;
align-items: baseline;
gap: 2px;
}
.proof__val strong { font-weight: 600; }
.proof__val .unit {
font-weight: 600;
font-size: 1em;
color: var(--skw-navy);
}
/* A footnote marker on a figure, picked out in the accent. */
.proof__val sup {
font-size: 0.35em;
font-weight: 600;
color: var(--skw-live);
margin-left: 2px;
top: -1.3em;
position: relative;
}
.proof__lbl {
margin: 0;
font-size: 16px;
color: var(--skw-mute-l);
max-width: 24ch;
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Dark band
The source only ever places this section on the bone band, so it hard-codes
navy text. These rules are an addition, so that the block's own colour
control is not a trap that renders navy on navy.
-------------------------------------------------------------------------- */
.proof--dark {
background: var(--skw-navy-dp);
color: var(--skw-bone);
}
.proof--dark .proof__val,
.proof--dark .proof__val .unit { color: var(--skw-bone); }
.proof--dark .proof__lbl { color: var(--skw-mute-d); }
/* ==========================================================================
Block: split-feature
--------------------------------------------------------------------------
An image on one side, text on the other. Two layouts:
sidebar a tall plate with a narrower text column beside it, on the
bone band. The source design has this twice under two
different prefixes - .vstory and .cjobs - with identical
rules; they are one set of classes here.
balanced a square plate and an equal text column, on the navy band,
with an optional caption laid over the image and a section
head above. The source calls this .company.
Section padding comes from .sx. The two layouts put their horizontal
padding in different places - sidebar on the inner grid so the plate can
reach the container edge, balanced on the section - so neither uses
.sx-wrap for that; they set it themselves.
========================================================================== */
/* --------------------------------------------------------------------------
Sidebar layout
-------------------------------------------------------------------------- */
.vstory {
background: var(--skw-bone-w);
color: var(--skw-navy);
padding: clamp(96px, 14vh, 160px) 0;
position: relative;
overflow: hidden;
}
.vstory__inner {
max-width: var(--skw-maxw);
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(360px, 36vw, 460px);
gap: clamp(40px, 5vw, 96px);
align-items: center;
padding: 0 clamp(24px, 4vw, 56px);
}
/* The plate and the body are placed explicitly in the same row, so the
markup order can stay image-first while the design flips which side the
text lands on. */
.vstory__diptych {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr;
gap: 0;
min-height: clamp(440px, 64vh, 620px);
}
.vstory__plate {
position: relative;
overflow: hidden;
background: var(--skw-navy-dp);
min-height: 0;
}
.vstory__plate img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: saturate(0.88) contrast(1.04);
}
.vstory__body {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 18px;
}
.vstory__title {
font-weight: 600;
font-size: clamp(2rem, 3.2vw, 3.1rem);
letter-spacing: -0.025em;
line-height: 1.1;
margin: 8px 0 4px;
color: var(--skw-navy);
max-width: 14ch;
text-wrap: balance;
}
.vstory__body p {
font-size: clamp(15px, 1vw, 17px);
line-height: 1.7;
color: var(--skw-mute-l);
margin: 0;
max-width: 44ch;
}
.vstory__cta {
margin-top: 12px;
align-self: flex-start;
}
/* The sidebar layout on the navy band. Not in the source, which only places
it on bone, but the colour control would otherwise render navy on navy. */
.vstory--dark {
background: var(--skw-navy-dp);
color: var(--skw-bone);
}
.vstory--dark .vstory__title { color: var(--skw-bone); }
.vstory--dark .vstory__body p { color: var(--skw-mute-d); }
/* --------------------------------------------------------------------------
Balanced layout
-------------------------------------------------------------------------- */
.company {
background: var(--skw-navy-dp);
color: var(--skw-bone);
}
.company__head { margin-bottom: clamp(56px, 9vh, 88px); }
.company__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: clamp(32px, 5vw, 96px);
align-items: center;
}
.company__plate {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--skw-navy-dp);
position: relative;
}
.company__plate img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: saturate(0.82) contrast(1.05) brightness(0.92);
}
/* A two-part caption laid over the top of the plate - a place and a date. */
.company__plate-meta {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
z-index: 2;
font-family: var(--skw-ff-alt);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--skw-white);
display: flex;
justify-content: space-between;
gap: 16px;
}
.company__body {
display: flex;
flex-direction: column;
gap: 24px;
}
.company__title {
font-weight: 600;
font-size: clamp(1.75rem, 3vw, 2.75rem);
line-height: 1.18;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
max-width: 20ch;
}
.company__body p {
color: var(--skw-mute-d);
font-size: 16px;
line-height: 1.6;
margin: 0;
max-width: 52ch;
}
.company__cta {
width: -moz-fit-content;
width: fit-content;
margin-top: 8px;
}
/* The balanced layout on the bone band. */
.company--light {
background: var(--skw-bone-w);
color: var(--skw-navy);
}
.company--light .company__title { color: var(--skw-navy); }
.company--light .company__body p { color: var(--skw-mute-l); }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.vstory__inner {
grid-template-columns: 1fr;
gap: 32px;
padding: 0;
}
.vstory__diptych {
grid-column: 1;
grid-row: auto;
grid-template-columns: 1fr;
gap: 0;
margin-left: 0;
width: 100%;
min-height: 0;
padding: 0 20px;
}
.vstory__plate { aspect-ratio: 4 / 3; }
.vstory__body {
grid-column: 1;
grid-row: auto;
padding: 0 20px;
}
}
@media (max-width: 860px) {
.company__grid { gap: 18px; }
.company__title { line-height: 1.22; }
}
@media (max-width: 760px) {
.vstory { padding: 56px 0; }
.vstory__title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
.vstory__body { gap: 16px; }
.vstory__body p { font-size: 15px; }
}
/* Responsive ------------------------------------------------------------- */
/* ==========================================================================
Responsive overrides
--------------------------------------------------------------------------
Breakpoint map carried over from the source design. The two load-bearing
widths are 980 (desktop to tablet: nav collapses to the drawer, two-column
section heads stack) and 760 (tablet to phone).
1280 / 1100 wide-desktop grid trims
980 nav drawer, section heads stack
860 secondary grid trims
760 phone layout
600 / 560 small phone
440 narrowest
Only cross-cutting overrides belong here - reduced section padding, global
stacking. A single feature media query stays in that feature stylesheet,
next to the rules it overrides.
========================================================================== */
@media (max-width: 760px) {
:root {
--skw-pad: clamp(64px, 10vh, 96px);
}
}
/* --------------------------------------------------------------------------
Home-page sections on small screens
The four sections the front page is built from tighten up more than the
rest: the vertical padding drops right down and the horizontal padding
moves from the section onto its inner container.
The source carried this with !important, because it was overriding
per-section padding of equal specificity. Scoping it to .sx raises the
specificity above the shared rule in base/layout.css, so no !important is
needed.
-------------------------------------------------------------------------- */
@media (max-width: 860px) {
.sx:is(.cap, .products, .proof, .company) {
padding: 32px 0;
}
.sx:is(.cap, .products, .proof, .company) > .sx-wrap {
padding: 0 clamp(20px, 5vw, 32px);
}
:is(.cap, .products, .proof, .company) :is(.cap__head, .products__head, .proof__head, .company__head) {
margin-bottom: 20px;
}
}