:root {
--cd-logo-header-max-height: 52px;
--cd-logo-header-max-width: 200px;
--cd-logo-intro-max: 120px;
}
@media (max-width: 921px) {
:root {
--cd-logo-header-max-height: 46px;
--cd-logo-header-max-width: 168px;
}
}
@media (max-width: 320px) {
:root {
--cd-logo-intro-max: 100px;
}
}
@media (min-width: 321px) and (max-width: 390px) {
:root {
--cd-logo-intro-max: 120px;
}
}
@media (min-width: 391px) and (max-width: 921px) {
:root {
--cd-logo-intro-max: 130px;
}
}
@media (min-width: 922px) {
:root {
--cd-logo-intro-max: 160px;
}
}
@media (max-width: 544px) {
:root {
--cd-logo-header-max-height: 40px;
--cd-logo-header-max-width: 132px;
}
} #cdsn-brand-reveal.cdsn-brand-reveal {
position: fixed !important;
inset: 0 !important;
z-index: 10080 !important;
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: auto;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border: 0;
box-sizing: border-box;
contain: layout style;
}
#cdsn-brand-reveal[hidden] {
display: none !important;
} .cdsn-brand-reveal__veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 55% 40% at 50% 48%, rgba(250, 251, 253, 0.88) 0%, rgba(250, 251, 253, 0.42) 55%, rgba(250, 251, 253, 0.18) 100%);
opacity: 1;
will-change: opacity;
}
html.cdsn-logo-v14-sequencing .cdsn-brand-reveal__veil,
html.cdsn-brand-reveal-active .cdsn-brand-reveal__veil {
animation: cdsn-veil-signature-fade var(--cdsn-intro-veil-ms, 12230ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cdsn-veil-signature-fade {
0% {
opacity: 1;
}
12% {
opacity: 0.92;
}
55% {
opacity: 0.38;
}
100% {
opacity: 0.1;
}
}
@media (prefers-reduced-motion: reduce) {
html.cdsn-logo-v14-sequencing .cdsn-brand-reveal__veil,
html.cdsn-brand-reveal-active .cdsn-brand-reveal__veil {
animation: none;
opacity: 0.35;
}
}
#cdsn-brand-reveal .cdsn-brand-reveal__stage {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0;
box-sizing: border-box;
flex: 0 0 auto !important;
} .cd-logo-intro-v14 {
position: relative;
display: block;
box-sizing: border-box;
width: var(--cd-logo-intro-max) !important;
max-width: var(--cd-logo-intro-max) !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
flex: 0 0 auto !important;
overflow: visible;
transform: none !important;
} #cdsn-brand-reveal .cd-logo-intro-v14__animation,
#cdsn-brand-reveal .cd-logo-intro-v14__final {
display: block !important;
position: relative !important;
left: auto !important;
top: auto !important;
inset: auto !important;
width: var(--cd-logo-intro-max) !important;
max-width: var(--cd-logo-intro-max) !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
pointer-events: none;
transform: none !important;
object-fit: contain !important;
object-position: center;
flex: 0 0 auto !important;
}
.cd-logo-intro-v14__final {
opacity: 0;
}
.cd-logo-intro-v14__final.is-wordmark-in {
opacity: 1;
} #cdsn-brand-reveal .cd-logo-intro-v14--crossfade .cd-logo-intro-v14__animation {
position: relative !important;
z-index: 0;
}
#cdsn-brand-reveal .cd-logo-intro-v14--crossfade .cd-logo-intro-v14__final {
position: absolute !important;
left: 0 !important;
top: 0 !important;
right: 0 !important;
inset: 0 auto auto 0 !important;
z-index: 1;
margin: 0 !important;
transform: none !important;
object-position: center;
}
#cdsn-brand-reveal .cd-logo-intro-v14__animation[hidden],
#cdsn-brand-reveal .cd-logo-intro-v14__final[hidden],
.cd-logo-intro-v14__animation[hidden],
.cd-logo-intro-v14__final[hidden] {
display: none !important;
}
html.cdsn-logo-v14-pending .cd-logo-intro-v14__animation,
html.cdsn-logo-v14-pending .cd-logo-intro-v14__final {
opacity: 0 !important;
visibility: hidden !important;
}
html.cdsn-brand-reveal-active .custom-logo,
html.cdsn-brand-reveal-active .site-logo-img img,
html.cdsn-brand-reveal-active .cdsn-native-header-logo,
html.cdsn-brand-reveal-active .cdsn-header-logo-img,
html.cdsn-brand-reveal-active .cdsn-animated-logo,
html.cdsn-intro-gate-active .custom-logo,
html.cdsn-intro-gate-active .site-logo-img img,
html.cdsn-intro-gate-active .cdsn-native-header-logo,
html.cdsn-intro-gate-active .cdsn-header-logo-img,
html.cdsn-intro-gate-active .cdsn-animated-logo {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.cdsn-intro-gate-complete .custom-logo,
html.cdsn-intro-gate-complete .site-logo-img img,
html.cdsn-intro-gate-complete .cdsn-native-header-logo,
html.cdsn-intro-gate-complete .cdsn-header-logo-img {
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.45 !important;
visibility: visible !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;
}
html.cdsn-intro-gate-active body,
html.cdsn-brand-reveal-active body {
overflow: hidden;
}
html.cdsn-intro-gate-complete {
overflow: auto;
}
html.cdsn-intro-gate-complete body {
overflow: auto;
}
html.cdsn-intro-gate-complete #page,
html.cdsn-intro-gate-complete #masthead,
html.cdsn-intro-gate-complete .ast-header-wrap,
html.cdsn-intro-gate-complete .ast-mobile-header-wrap,
html.cdsn-intro-gate-complete .cdsn-global-header,
html.cdsn-intro-gate-complete .site-content,
html.cdsn-intro-gate-complete .cdsn-simple-shell {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html.cdsn-intro-gate-complete #cdsn-brand-reveal,
html.cdsn-intro-gate-complete .cdsn-brand-reveal,
html.cdsn-intro-gate-complete .cdsn-logo-morph-clone {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
height: 0 !important;
width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
} html.cdsn-intro-gate-active .cd-fab-dock-managed,
html.cdsn-brand-reveal-active .cd-fab-dock-managed,
html.cdsn-intro-gate-active #car-root,
html.cdsn-brand-reveal-active #car-root,
html.cdsn-intro-page-fading #car-root,
html.cdsn-chooser-open #car-root {
visibility: hidden !important;
pointer-events: none !important;
} html.cdsn-intro-gate-active .cdsn-bottom-nav,
html.cdsn-brand-reveal-active .cdsn-bottom-nav,
html.cdsn-intro-page-fading .cdsn-bottom-nav,
html.cdsn-chooser-open .cdsn-bottom-nav {
visibility: hidden !important;
pointer-events: none !important;
}
.cdsn-brand-reveal__skip,
.cdsn-brand-reveal__sound {
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(45, 35, 66, 0.18);
color: #2d2342;
box-shadow: 0 2px 10px rgba(11, 31, 77, 0.12);
cursor: pointer;
}
.cdsn-brand-reveal__skip:focus-visible,
.cdsn-brand-reveal__sound:focus-visible {
outline: 2px solid #6a3fb5;
outline-offset: 2px;
}
.cdsn-brand-reveal__skip {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 10085;
min-height: 44px;
padding: 10px 16px;
font: 650 14px/1.2 system-ui, sans-serif;
border-radius: 999px;
} .cdsn-brand-reveal__sound {
position: fixed;
left: 50%;
right: auto;
bottom: 24px;
transform: translateX(52px);
z-index: 10085;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0;
border-radius: 50%;
overflow: visible;
box-sizing: border-box;
}
.cdsn-brand-reveal__sound[hidden] {
display: none !important;
} .cdsn-brand-reveal__sound.is-muted,
.cdsn-brand-reveal__sound:not(.is-playing) {
background: #0b1f4d;
color: #fff;
border: 2px solid #ffd166;
box-shadow:
0 8px 28px rgba(11, 31, 77, 0.5),
0 0 0 4px rgba(11, 31, 77, 0.35),
0 0 0 7px rgba(106, 63, 181, 0.28);
}
.cdsn-brand-reveal__sound.is-muted {
animation: cdsn-sound-invite 2.2s ease-in-out infinite;
}
.cdsn-brand-reveal__sound.is-muted .cdsn-brand-reveal__sound-icon,
.cdsn-brand-reveal__sound:not(.is-playing) .cdsn-brand-reveal__sound-icon {
color: #fff;
}
.cdsn-brand-reveal__sound-icon {
position: relative;
z-index: 1;
display: flex;
line-height: 0;
}
.cdsn-brand-reveal__sound-icon-on[hidden],
.cdsn-brand-reveal__sound-icon-off[hidden] {
display: none !important;
}
.cdsn-brand-reveal__sound-icon-on:not([hidden]),
.cdsn-brand-reveal__sound-icon-off:not([hidden]) {
display: block !important;
} .cdsn-brand-reveal__sound.is-playing {
background: rgba(255, 255, 255, 0.42);
color: #6b7a94;
border: 1px solid rgba(11, 31, 77, 0.1);
box-shadow: 0 1px 4px rgba(11, 31, 77, 0.06);
animation: none;
}
.cdsn-brand-reveal__sound.is-playing .cdsn-brand-reveal__sound-icon {
color: #6b7a94;
}
.cdsn-brand-reveal__sound.is-playing.is-sound-live {
animation: cdsn-sound-halo 1.05s ease-in-out 3;
}
.cdsn-brand-reveal__sound.is-playing.is-sound-live::before,
.cdsn-brand-reveal__sound.is-playing.is-sound-live::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid rgba(106, 63, 181, 0.18);
pointer-events: none;
z-index: 0;
animation: cdsn-sound-wave 1.6s ease-out 2;
}
.cdsn-brand-reveal__sound.is-playing.is-sound-live::after {
animation-delay: 0.45s;
border-color: rgba(192, 75, 165, 0.12);
}
.cdsn-brand-reveal__sound.is-playing:not(.is-sound-live)::before,
.cdsn-brand-reveal__sound.is-playing:not(.is-sound-live)::after,
.cdsn-brand-reveal__sound.is-muted::before,
.cdsn-brand-reveal__sound.is-muted::after {
content: none;
animation: none;
}
@keyframes cdsn-sound-halo {
0%, 100% {
box-shadow: 0 1px 4px rgba(11, 31, 77, 0.06);
}
50% {
box-shadow:
0 2px 8px rgba(106, 63, 181, 0.1),
0 0 0 3px rgba(106, 63, 181, 0.06);
}
}
@keyframes cdsn-sound-wave {
0% {
transform: scale(1);
opacity: 0.28;
}
100% {
transform: scale(1.22);
opacity: 0;
}
}
@keyframes cdsn-sound-invite {
0%, 100% {
box-shadow:
0 8px 28px rgba(11, 31, 77, 0.5),
0 0 0 4px rgba(11, 31, 77, 0.35),
0 0 0 7px rgba(106, 63, 181, 0.28);
}
50% {
box-shadow:
0 10px 32px rgba(106, 63, 181, 0.42),
0 0 0 5px rgba(255, 209, 102, 0.45),
0 0 0 10px rgba(106, 63, 181, 0.16);
}
}
@media (prefers-reduced-motion: reduce) {
.cdsn-brand-reveal__sound.is-sound-live,
.cdsn-brand-reveal__sound.is-sound-live::before,
.cdsn-brand-reveal__sound.is-sound-live::after,
.cdsn-brand-reveal__sound.is-muted {
animation: none;
}
.cdsn-brand-reveal__sound.is-sound-live::before,
.cdsn-brand-reveal__sound.is-sound-live::after {
content: none;
}
} .cdsn-brand-sound-persistent {
position: fixed;
left: 50%;
right: auto;
bottom: max(24px, calc(12px + env(safe-area-inset-bottom, 0px)));
transform: translateX(-50%);
z-index: 100087;
background: transparent;
border-radius: 50%;
}
@media (max-width: 921px) {
body.cdsn-simple-mode .cdsn-brand-sound-persistent {
left: 50%;
right: auto;
bottom: calc(var(--csn-bottom-h, calc(68px + env(safe-area-inset-bottom, 0px))) + 12px);
transform: translateX(-50%);
z-index: 100087;
}
} html.cdsn-intro-gate-active .cdsn-brand-sound-host,
html.cdsn-brand-reveal-active .cdsn-brand-sound-host {
display: none !important;
}
.cdsn-logo-morph-clone {
transform-origin: top left;
object-fit: contain;
max-width: min(160px, 100vw) !important;
height: auto !important;
} img.cdsn-logo,
img.custom-logo,
img.cd-logo-intro-v14__final,
img.cd-logo-intro-v14__animation,
img.cdsn-logo-morph-clone,
.cdsn-logo-morph-clone {
max-width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 600px) {
html.cdsn-intro-gate-complete,
html.cdsn-intro-gate-complete body {
overflow-x: hidden !important;
}
html.cdsn-intro-gate-complete img.custom-logo,
html.cdsn-intro-gate-complete img.cdsn-native-header-logo,
html.cdsn-intro-gate-complete img.cdsn-header-logo-img {
max-width: min(140px, 100%) !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
html.cdsn-intro-gate-complete .cdsn-logo-morph-clone,
html.cdsn-intro-gate-complete img.cd-logo-intro-v14__final,
html.cdsn-intro-gate-complete img.cd-logo-intro-v14__animation {
display: none !important;
}
}
@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;
}
}