.ckl-header {
--hdr-ink: var(--ckl-white);
--hdr-ink-invert: var(--ckl-blue);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
color: var(--hdr-ink);
padding-top: 2.875rem;
padding-bottom: 0;
transform: translateY(0);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
padding 0.3s ease,
transform 0.3s ease; } .ckl-header.is-hidden {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.ckl-header {
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
padding 0.3s ease;
} .ckl-header.is-hidden {
transform: none;
}
}
body.ckl-header-on-light .ckl-header:not(.is-scrolled):not(.is-mega-open):not(.is-mobile-open) {
--hdr-ink: var(--ckl-blue);
--hdr-ink-invert: var(--ckl-white);
}
.ckl-header.is-scrolled,
.ckl-header.is-mega-open,
.ckl-header.is-mobile-open {
background-color: var(--ckl-blue);
}
.ckl-header.is-scrolled {
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: 0 0.375rem 1.25rem rgb(0 0 0 / 18%);
}
.ckl-header__shell {
position: relative;
width: 100%;
}
.ckl-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
} .ckl-header__logo {
display: flex;
flex-shrink: 0;
transform-origin: left center;
transform: scale(1);
color: var(--hdr-ink);
transition:
transform 0.3s ease,
color 0.3s ease;
}
.ckl-header.is-scrolled .ckl-header__logo {
transform: scale(0.86);
}
.ckl-header__logo svg {
height: auto;
width: auto;
} .ckl-header__nav {
display: flex;
align-items: center;
flex-shrink: 0;
}
.ckl-header__nav-list {
display: flex;
align-items: center;
gap: clamp(1.375rem, 2.85vw, 2.75rem);
list-style: none;
margin: 0;
padding: 0;
}
.ckl-header__nav-item {
display: flex;
}
.ckl-header__nav-link {
position: relative;
font-size: clamp(0.875rem, 1.2vw, 1rem);
font-weight: 500;
line-height: 100%;
font-family: var(--ckl-font-text);
color: var(--hdr-ink);
padding: 0.5rem 0;
transition: color 0.3s ease;
} .ckl-header__nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.125rem;
background-color: var(--hdr-ink);
transform: scaleX(0);
transform-origin: left center;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.3s ease;
} .ckl-header__nav-link::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0.25rem;
height: 0.25rem;
background-color: var(--hdr-ink);
transform: translateX(-50%) scale(0);
transform-origin: center;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.3s ease;
}
.ckl-header__nav-link.is-current::before {
transform: translateX(-50%) scale(1);
}
@media (hover: hover) {
.ckl-header__nav-link:hover::after {
transform: scaleX(1);
}
.ckl-header__nav-link:hover::before {
transform: translateX(-50%) scale(0);
}
}
.ckl-header__nav-link:focus-visible::after,
.ckl-header__nav-link.is-open::after {
transform: scaleX(1);
}
.ckl-header__nav-link:focus-visible::before,
.ckl-header__nav-link.is-open::before {
transform: translateX(-50%) scale(0);
} .ckl-header__cta {
font-size: clamp(0.875rem, 1.2vw, 1rem);
padding: 0.875rem clamp(1rem, 2.2vw, 2rem);
font-weight: 700;
font-family: var(--ckl-font-tag);
border: 0.125rem solid var(--hdr-ink);
color: var(--hdr-ink);
text-transform: uppercase;
white-space: nowrap;
background-color: transparent;
background-image: linear-gradient(var(--hdr-ink), var(--hdr-ink));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition:
color 0.2s ease-in-out,
border-color 0.2s ease-in-out,
var(--ckl-sweep-transition);
}
.ckl-header__cta:hover,
.ckl-header__cta:focus-visible {
color: var(--hdr-ink-invert);
background-size: 100% 100%;
}  .ckl-header__panels {
height: 0;
opacity: 0;
overflow: hidden;
transition:
height 0.28s var(--ckl-ease-panel),
opacity 0.28s var(--ckl-ease-panel);
} .ckl-header__panels-clip {
position: relative;
min-height: 0;
}
.ckl-mega {
width: 100%;
padding: 4.1875rem 0 5.25rem; position: absolute;
inset: 0 0 auto;
opacity: 0;
pointer-events: none;
visibility: hidden;
} .ckl-mega.is-active {
position: relative;
inset: auto;
opacity: 1;
pointer-events: auto;
visibility: visible;
animation: ckl-mega-enter 0.24s var(--ckl-ease-panel) both;
} .ckl-mega.is-leaving {
visibility: visible;
opacity: 0;
transition: opacity 0.16s var(--ckl-ease-panel);
}
@keyframes ckl-mega-enter {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.ckl-mega__inner {
max-width: var(--ckl-container-max);
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns:
clamp(18rem, 51.75vw, 46.5625rem)
minmax(7.35rem, max-content)
minmax(14.0625rem, max-content);
row-gap: clamp(1.75rem, 3.5vw, 3.5rem);
column-gap: clamp(2rem, 4.76vw, 4.2875rem);
justify-content: start;
}
.ckl-mega__overview {
display: flex;
flex-direction: column;
grid-column: 1;
}
.ckl-mega__overview-label {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: 2rem;
line-height: 1.18;
color: var(--ckl-aqua-blue);
margin: 0 0 0.33em;
text-wrap: balance;
}
.ckl-mega__overview-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 2rem;
padding-left: 1.19em;
display: flex;
flex-direction: column;
gap: 0.1em;
}
.ckl-mega__overview-link {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: 2rem;
line-height: 1.18;
white-space: nowrap;
--sweep-from: var(--ckl-white);
--sweep-to: var(--ckl-aqua-blue);
}
.ckl-mega__group-tabs {
grid-column: 2;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
font-size: 1.25rem;
gap: 0.38em;
}
.ckl-mega__group-tab {
background: transparent;
border: none;
padding: 0;
cursor: default;
text-align: left;
text-transform: uppercase;
font-family: var(--ckl-font-tag);
font-weight: var(--ckl-fw-tag);
font-size: 1.25rem;
line-height: 1.3;
letter-spacing: 0.02em;
color: rgb(255 255 255 / 50%);
transition: color 0.15s ease-in-out;
}
.ckl-mega__group-tab.is-active {
color: var(--ckl-white);
}
.ckl-mega__group-links {
grid-column: 3;
grid-row: 1;
list-style: none;
margin: 0;
padding: 0;
display: none;
flex-direction: column;
font-size: 1rem;
gap: 0.53em;
}
.ckl-mega__group-links.is-active {
display: flex;
} .ckl-mega__group-links.is-active > li,
.ckl-mobile-nav__group-links.is-active > li {
animation: ckl-stagger-in 0.6s var(--ckl-ease-entrance) both;
animation-delay: calc(0.05s + var(--i, 0) * 0.05s);
}
@keyframes ckl-stagger-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.ckl-mega__group-link {
font-family: var(--ckl-font-text);
font-weight: var(--ckl-fw-text);
font-size: 1rem;
line-height: 1.35;
--sweep-from: rgb(255 255 255 / 55%);
--sweep-to: var(--ckl-hover-links);
color: var(--sweep-from);
transition: color 0.2s ease-in-out;
}
.ckl-mega__group-link:hover,
.ckl-mega__group-link:focus-visible {
color: var(--sweep-to);
} @media (hover: hover) {
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.ckl-mega__overview-link,
.ckl-mega__group-link {
background-color: var(--sweep-from);
background-image: linear-gradient(var(--sweep-to), var(--sweep-to));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: var(--ckl-sweep-transition);
}
.ckl-mega__overview-link:hover,
.ckl-mega__overview-link:focus-visible,
.ckl-mega__group-link:hover,
.ckl-mega__group-link:focus-visible {
background-size: 100% 100%;
}
}
}  .ckl-header__mobile-toggle {
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0.375rem;
color: var(--ckl-white);
cursor: pointer;
min-width: 2.75rem;
min-height: 2.75rem;
}
.ckl-header__hamburger {
position: relative;
display: block;
width: 1.75rem;
height: 1.125rem;
}
.ckl-header__hamburger span {
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 999px;
background-color: currentcolor;
transform-origin: center;
transition:
transform 0.25s var(--ckl-ease-entrance),
opacity 0.2s ease;
}
.ckl-header__hamburger span:nth-child(1) { top: 0; }
.ckl-header__hamburger span:nth-child(2) { top: 50%; margin-top: -1px; }
.ckl-header__hamburger span:nth-child(3) { bottom: 0; } .ckl-header.is-mobile-open .ckl-header__hamburger span:nth-child(1),
.ckl-header.is-mobile-open .ckl-header__hamburger span:nth-child(3) {
transition-delay: 0.04s;
}
.ckl-header.is-mobile-open .ckl-header__hamburger span:nth-child(1) {
transform: translateY(0.5rem) rotate(45deg);
}
.ckl-header.is-mobile-open .ckl-header__hamburger span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.ckl-header.is-mobile-open .ckl-header__hamburger span:nth-child(3) {
transform: translateY(-0.5rem) rotate(-45deg);
} .ckl-mobile-nav {
display: none;
} @media (max-width: 1160px) {
.ckl-header {
--hdr-ink: var(--ckl-white) !important;
--hdr-ink-invert: var(--ckl-blue) !important;
padding: 1.25rem 0;
background-color: var(--ckl-blue);
}
.ckl-header.is-mobile-open {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
.ckl-header.is-mobile-open .ckl-header__shell {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.ckl-header.is-mobile-open .ckl-header__wrapper {
flex-shrink: 0;
}
.ckl-header__logo {
transform: none !important;
}
.ckl-header__logo svg {
width: clamp(11rem, 48vw, 12.25rem);
height: auto;
}
.ckl-header__nav,
.ckl-header__panels {
display: none;
}
.ckl-header__mobile-toggle {
display: flex;
}
.ckl-mobile-nav {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 999;
background-color: var(--ckl-blue);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-0.75rem);
transition:
opacity 0.2s ease-in-out,
transform 0.2s ease-in-out,
visibility 0.2s ease-in-out;
}
.ckl-header.is-mobile-open .ckl-mobile-nav {
position: static;
flex: 1 1 auto;
min-height: 0;
height: auto;
opacity: 1;
visibility: visible;
transform: translateY(0);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ckl-mobile-nav__list {
list-style: none;
margin: 0;
padding: clamp(1.5rem, 6vw, 2.5rem) 5% 1rem;
display: flex;
flex-direction: column;
}
.ckl-mobile-nav__item {
border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.ckl-mobile-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.ckl-mobile-nav__link {
flex: 1;
padding: 1rem 0;
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(1.625rem, 5vw, 2rem);
line-height: 1.15;
color: var(--ckl-white);
text-wrap: balance;
}
.ckl-mobile-nav__link[aria-current='page'] {
color: var(--ckl-aqua-blue);
box-shadow: inset 0.1875rem 0 0 var(--ckl-aqua-blue);
padding-left: 0.75rem;
}
.ckl-mobile-nav__toggle {
background: transparent;
border: none;
color: var(--ckl-white);
padding: 0.75rem;
display: flex;
cursor: pointer;
}
.ckl-mobile-nav__toggle svg {
transition: transform 0.2s ease-in-out;
}
.ckl-mobile-nav__toggle[aria-expanded='true'] svg {
transform: rotate(180deg);
}
.ckl-mobile-nav__submenu {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s var(--ckl-ease-panel);
}
.ckl-mobile-nav__submenu.is-open {
grid-template-rows: 1fr;
} .ckl-mobile-nav__submenu-inner {
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 4vw, 2rem);
padding-bottom: clamp(1.5rem, 4vw, 2rem);
}
.ckl-mobile-nav__overview ul {
list-style: none;
margin: 0;
padding: 0 0 0 0.9375rem;
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 2vw, 0.875rem);
}
.ckl-mobile-nav__overview-label {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(1.75rem, 5.5vw, 2.25rem);
line-height: 1.2;
color: var(--ckl-aqua-blue);
margin: 0 0 clamp(0.625rem, 2vw, 0.875rem);
text-wrap: balance;
} .ckl-mobile-nav__overview-link {
font-family: var(--ckl-font-title);
font-weight: var(--ckl-fw-title);
font-size: clamp(1.75rem, 5.5vw, 2.25rem);
line-height: 1.2;
--sweep-from: var(--ckl-white);
--sweep-to: var(--ckl-aqua-blue);
text-wrap: balance;
}
.ckl-mobile-nav__overview-link[aria-current='page'] {
color: var(--ckl-aqua-blue);
}
.ckl-mobile-nav__group-tabs {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.ckl-mobile-nav__group-tab {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
text-transform: uppercase;
font-family: var(--ckl-font-tag);
font-weight: var(--ckl-fw-tag);
font-size: clamp(1rem, 3.8vw, 1.25rem);
line-height: 1.3;
letter-spacing: 0.02em;
color: rgb(255 255 255 / 50%);
transition: color 0.15s ease-in-out;
}
.ckl-mobile-nav__group-tab.is-active {
color: var(--ckl-white);
}
.ckl-mobile-nav__group-links {
list-style: none;
margin: 0;
padding: 0;
display: none;
flex-direction: column;
gap: clamp(0.625rem, 2vw, 0.875rem);
}
.ckl-mobile-nav__group-links.is-active {
display: flex;
} .ckl-mobile-nav__group-link {
font-family: var(--ckl-font-text);
font-size: clamp(0.9375rem, 3.4vw, 1.125rem);
line-height: 1.4;
--sweep-from: rgb(255 255 255 / 75%);
--sweep-to: var(--ckl-hover-links);
}
.ckl-mobile-nav__group-link:hover,
.ckl-mobile-nav__group-link:focus-visible {
color: var(--ckl-hover-links);
}
.ckl-mobile-nav__cta {
display: block;
margin: clamp(1.5rem, 5vw, 2.5rem) 5% clamp(2rem, 6vw, 3rem);
margin-bottom: max(clamp(2rem, 6vw, 3rem), env(safe-area-inset-bottom, 0px));
padding: 1.25rem clamp(1.2rem, 2.2vw, 2rem);
text-align: center;
font-size: 1rem;
font-weight: 700;
font-family: var(--ckl-font-tag);
border: 0.125rem solid var(--ckl-white);
color: var(--ckl-white);
text-transform: uppercase;
background-color: transparent;
background-image: linear-gradient(var(--ckl-white), var(--ckl-white));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition:
color 0.2s ease-in-out,
var(--ckl-sweep-transition);
}
.ckl-mobile-nav__cta:hover,
.ckl-mobile-nav__cta:focus-visible {
color: var(--ckl-blue);
background-size: 100% 100%;
}
} @media (prefers-reduced-motion: reduce) {
.ckl-header,
.ckl-header__logo,
.ckl-header__nav-link,
.ckl-header__nav-link::after,
.ckl-header__nav-link::before,
.ckl-header__panels,
.ckl-mobile-nav,
.ckl-mobile-nav__submenu,
.ckl-header__hamburger span, .ckl-mega__overview-link,
.ckl-mega__group-link,
.ckl-mega.is-leaving,
.ckl-mobile-nav__overview-link,
.ckl-mobile-nav__group-link,
.ckl-mobile-nav__cta {
transition: none !important;
animation: none !important;
} .ckl-header__cta {
transition: color 0.2s ease-in-out !important;
}
.ckl-mega.is-active,
.ckl-mega__group-links.is-active,
.ckl-mega__group-links.is-active > li,
.ckl-mobile-nav__group-links.is-active > li {
animation: none !important;
} } .ckl-page-offset {
padding-top: clamp(6.5rem, 10vw, 8.5rem);
}