.cl-glitch-toggle {
align-items: center;
background: #a30f2d;
border: 1px solid #ff617a;
border-radius: 0.24rem;
bottom: max(0.75rem, env(safe-area-inset-bottom));
box-shadow: 0 8px 24px rgb(0 0 0 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.1);
color: #fff;
display: inline-flex;
font: 700 0.65rem/1 var(--cl-font-mono, "Roboto Mono", monospace);
gap: 0.42rem;
left: max(0.75rem, env(safe-area-inset-left));
letter-spacing: 0.04em;
min-height: 2.75rem;
padding: 0.62rem 0.72rem;
position: fixed;
text-transform: uppercase;
z-index: 2147483647;
}
.cl-glitch-toggle:hover {
background: #c81437;
border-color: #fff;
}
.cl-glitch-toggle:focus-visible {
outline: 3px solid #fff !important;
outline-offset: 3px;
}
.cl-glitch-toggle[aria-pressed="true"] {
background: #ff2f4f;
border-color: #fff;
box-shadow: 0 0 0 2px #160307, 0 0 24px rgb(255 47 79 / 0.58);
color: #160307;
}
.cl-glitch-toggle__indicator {
align-items: center;
border: 1px solid currentColor;
border-radius: 50%;
display: inline-flex;
height: 1.1rem;
justify-content: center;
width: 1.1rem;
}
.cl-glitch-toggle__state {
border-left: 1px solid rgb(255 255 255 / 0.48);
font-size: 0.58rem;
padding-left: 0.42rem;
}
.cl-glitch-toggle[aria-pressed="true"] .cl-glitch-toggle__state {
border-left-color: rgb(22 3 7 / 0.45);
}
body.cl-glitch-mode::after {
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgb(255 47 79 / 0.11) 3px,
rgb(255 47 79 / 0.11) 4px,
rgb(0 238 255 / 0.08) 4px,
transparent 5px
);
content: "";
inset: 0;
mix-blend-mode: screen;
opacity: 0.56;
pointer-events: none;
position: fixed;
z-index: 2147483645;
}
body.cl-glitch-mode h1,
body.cl-glitch-mode h2,
body.cl-glitch-mode .cl-workbench__title,
body.cl-glitch-mode .cl-catalog-day__title {
text-shadow: -1px 0 rgb(255 47 79 / 0.75), 1px 0 rgb(0 238 255 / 0.58) !important;
}
body.cl-glitch-mode .navbar.cl-site-nav {
box-shadow: -2px 0 rgb(255 47 79 / 0.5), 2px 0 rgb(0 238 255 / 0.4) !important;
}
@media (max-width: 30rem) {
.cl-glitch-toggle {
font-size: 0.6rem;
min-height: 2.75rem;
padding-inline: 0.64rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.cl-glitch-mode::after {
opacity: 0.18;
}
}
@media (forced-colors: active) {
.cl-glitch-toggle {
background: ButtonFace;
border-color: ButtonText;
color: ButtonText;
forced-color-adjust: auto;
}
.cl-glitch-toggle[aria-pressed="true"] {
outline: 3px solid Highlight !important;
}
body.cl-glitch-mode::after {
display: none;
}
}
@media print {
.cl-glitch-toggle,
body.cl-glitch-mode::after {
display: none !important;
}
}