:root {
--cd-logo-header-max-height: 52px;
--cd-logo-header-max-width: 200px;
--cd-logo-header-width: min(
var(--cd-logo-header-max-width),
calc(var(--cd-logo-header-max-height) * 1024 / 402)
);
}
@media (max-width: 921px) {
:root {
--cd-logo-header-max-height: 46px;
--cd-logo-header-max-width: 168px;
}
}
@media (max-width: 544px) {
:root {
--cd-logo-header-max-height: 40px;
--cd-logo-header-max-width: 132px;
}
}
.cdsn-animated-logo--overlay {
display: block;
line-height: 0;
}
.cdsn-animated-logo--reveal .cd-logo-v8-stage-shell,
.cdsn-animated-logo--reveal .cd-logo-v7-stage-shell {
width: min(82vw, 460px);
margin: 0 auto;
}
.cd-logo-v8-stage-shell,
.cd-logo-v7-stage-shell,
.cd-logo-stage-shell {
display: block;
position: relative;
overflow: hidden;
line-height: 0;
aspect-ratio: 1024 / 402;
}
.cd-logo-v8-coordinate-space,
.cd-logo-v7-coordinate-space,
.cd-logo-stage-coordinate-space {
position: absolute;
top: 0;
left: 0;
width: 1024px;
height: 402px;
transform-origin: top left;
will-change: transform;
}
.cd-logo-v8-layer,
.cd-logo-v7-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: fill;
opacity: 0;
pointer-events: none;
}
.cdsn-animated-logo.is-complete .cd-logo-v8-layer--final,
.cdsn-animated-logo.is-complete .cd-logo-v7-layer--final {
opacity: 1;
} html.cdsn-brand-reveal-active .custom-logo,
html.cdsn-brand-reveal-active .cdsn-native-header-logo,
html.cdsn-intro-gate-active .custom-logo,
html.cdsn-intro-gate-active .cdsn-native-header-logo {
opacity: 0 !important;
visibility: visible !important;
pointer-events: none !important;
}
html.cdsn-intro-gate-complete .custom-logo,
html.cdsn-intro-gate-complete .cdsn-native-header-logo {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
} html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) #page,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) #masthead,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) .ast-header-wrap,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) .ast-mobile-header-wrap,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) .cdsn-global-header,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) .site-content,
html.cdsn-intro-gate-active:not(.cdsn-intro-page-fading) .cdsn-simple-shell {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.cdsn-intro-page-fading #page,
html.cdsn-intro-page-fading #masthead,
html.cdsn-intro-page-fading .ast-header-wrap,
html.cdsn-intro-page-fading .ast-mobile-header-wrap,
html.cdsn-intro-page-fading .cdsn-global-header,
html.cdsn-intro-page-fading .site-content,
html.cdsn-intro-page-fading .cdsn-simple-shell {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 400ms ease;
}
html.cdsn-intro-gate-active,
html.cdsn-brand-reveal-active {
overflow: hidden;
}
.cdsn-brand-reveal__stage .cdsn-animated-logo {
display: block;
}
.cdsn-brand-reveal__skip {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 10075;
border: 0;
background: transparent;
color: rgba(45, 35, 66, 0.55);
font: 500 13px/1.2 system-ui, sans-serif;
cursor: pointer;
padding: 8px 12px;
}
.cdsn-logo-morph-clone {
transform-origin: top left;
}
@media (prefers-reduced-motion: reduce) {
html.cdsn-intro-gate-active #page,
html.cdsn-intro-gate-active #masthead,
html.cdsn-intro-gate-active .cdsn-global-header {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}