:root {
--l3r-ink: #171014;
--l3r-muted: #725766;
--l3r-paper: #fff5fb;
--l3r-white: #fff;
--l3r-fuchsia: #e333a8;
--l3r-hot: #ff5fbd;
--l3r-soft: #ffd6ee;
--l3r-violet: #6d246d;
--l3r-line: rgba(227, 51, 168, 0.2);
--l3r-shadow: 0 28px 80px rgba(227, 51, 168, 0.22);
--l3r-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--l3r-serif: "Cormorant Garamond", Georgia, serif;
--l3r-mouse-x: 0;
--l3r-mouse-y: 0;
}
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
.l3r-maintenance-body {
margin: 0;
color: var(--l3r-ink);
background: var(--l3r-paper);
font-family: var(--l3r-font);
overflow-x: hidden;
}
.l3r-maintenance-stage {
position: relative;
display: grid;
min-height: 100vh;
overflow: hidden;
padding: clamp(18px, 3vw, 38px);
isolation: isolate;
}
.l3r-maintenance-bg,
.l3r-maintenance-stage::before,
.l3r-maintenance-stage::after {
position: absolute;
inset: 0;
z-index: -3;
content: "";
}
.l3r-maintenance-stage::before {
background:
linear-gradient(115deg, rgba(227, 51, 168, 0.2), transparent 34%),
linear-gradient(245deg, rgba(255, 95, 189, 0.24), transparent 38%),
repeating-linear-gradient(90deg, transparent 0 54px, rgba(227, 51, 168, 0.08) 54px 55px);
transform: translate3d(calc(var(--l3r-mouse-x) * -18px), calc(var(--l3r-mouse-y) * -18px), 0) scale(1.04);
animation: l3r-maintenance-drift 16s ease-in-out infinite alternate;
}
.l3r-maintenance-stage::after {
z-index: -2;
background:
radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.9), transparent 18%),
radial-gradient(circle at 78% 72%, rgba(255, 214, 238, 0.82), transparent 26%),
linear-gradient(180deg, rgba(255, 245, 251, 0.42), rgba(255, 245, 251, 0.94));
}
.l3r-maintenance-bg span {
position: absolute;
display: block;
border: 1px solid rgba(227, 51, 168, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 24px 80px rgba(227, 51, 168, 0.16);
animation: l3r-maintenance-float 10s ease-in-out infinite;
}
.l3r-maintenance-bg span:nth-child(1) {
top: 12%;
left: 7%;
width: 138px;
height: 138px;
}
.l3r-maintenance-bg span:nth-child(2) {
right: 9%;
bottom: 14%;
width: 210px;
height: 210px;
animation-delay: -2.5s;
}
.l3r-maintenance-bg span:nth-child(3) {
top: 54%;
left: 50%;
width: 78px;
height: 78px;
animation-delay: -5s;
}
.l3r-maintenance-shell {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.78fr);
gap: clamp(22px, 4vw, 58px);
align-items: center;
width: min(1180px, 100%);
margin: auto;
}
.l3r-maintenance-content,
.l3r-maintenance-workbench {
position: relative;
}
.l3r-maintenance-logo {
width: min(136px, 42vw);
height: auto;
margin: 0 0 14px;
filter: drop-shadow(0 14px 24px rgba(227, 51, 168, 0.16));
}
.l3r-maintenance-mark {
display: flex;
gap: 7px;
margin-bottom: 24px;
font-family: var(--l3r-serif);
font-size: 22px;
font-weight: 900;
}
.l3r-maintenance-mark span {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid var(--l3r-line);
border-radius: 50%;
background: rgba(255, 255, 255, 0.72);
animation: l3r-maintenance-rise 2.8s ease-in-out infinite;
}
.l3r-maintenance-mark span:nth-child(2) {
animation-delay: 0.16s;
}
.l3r-maintenance-mark span:nth-child(3) {
animation-delay: 0.32s;
}
.l3r-maintenance-eyebrow {
margin: 0 0 10px;
color: var(--l3r-violet);
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.l3r-maintenance-content h1 {
max-width: 720px;
margin: 0;
font-family: var(--l3r-serif);
font-size: clamp(46px, 7vw, 88px);
line-height: 0.94;
letter-spacing: 0;
}
.l3r-maintenance-content p:not(.l3r-maintenance-eyebrow) {
max-width: 620px;
margin: 18px 0 0;
color: var(--l3r-muted);
font-size: clamp(17px, 2vw, 22px);
line-height: 1.55;
}
.l3r-maintenance-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 26px;
}
.l3r-maintenance-actions a {
position: relative;
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0 24px;
border: 1px solid var(--l3r-ink);
border-radius: 999px;
color: #fff;
background: var(--l3r-ink);
box-shadow: 0 14px 36px rgba(23, 16, 20, 0.2);
font-weight: 900;
text-decoration: none;
transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.l3r-maintenance-actions a::after {
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: translateX(-120%);
content: "";
}
.l3r-maintenance-actions a:hover {
background: var(--l3r-fuchsia);
box-shadow: 0 16px 40px rgba(227, 51, 168, 0.28);
transform: translateY(-2px);
}
.l3r-maintenance-actions a:hover::after {
animation: l3r-maintenance-shine 760ms ease;
}
.l3r-maintenance-actions span {
max-width: 330px;
color: var(--l3r-muted);
font-size: 13px;
font-weight: 800;
}
.l3r-maintenance-status {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-width: 620px;
margin-top: 26px;
}
.l3r-maintenance-status span {
display: grid;
min-height: 72px;
align-content: center;
gap: 5px;
padding: 14px;
border: 1px solid var(--l3r-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.66);
box-shadow: 0 14px 34px rgba(227, 51, 168, 0.08);
color: var(--l3r-muted);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
backdrop-filter: blur(18px);
}
.l3r-maintenance-status strong {
color: var(--l3r-fuchsia);
font-size: 18px;
}
@media (min-width: 941px) {
.l3r-maintenance-character {
bottom: 48px;
height: 450px;
}
.l3r-character-head {
top: 30px;
}
.l3r-character-body {
top: 160px;
}
.l3r-character-table {
bottom: 34px;
}
.l3r-maintenance-console {
bottom: 30px;
}
.l3r-maintenance-hint {
bottom: 30px;
}
}
.l3r-maintenance-workbench {
min-height: 560px;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 8px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 214, 238, 0.48)),
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36));
box-shadow: var(--l3r-shadow);
backdrop-filter: blur(22px);
transform: translate3d(calc(var(--l3r-mouse-x) * 16px), calc(var(--l3r-mouse-y) * 12px), 0);
transition: transform 160ms ease-out;
}
.l3r-maintenance-workbench::before {
position: absolute;
inset: 18px;
border: 1px solid rgba(227, 51, 168, 0.14);
border-radius: 8px;
background:
repeating-linear-gradient(0deg, transparent 0 38px, rgba(227, 51, 168, 0.07) 38px 39px),
repeating-linear-gradient(90deg, transparent 0 38px, rgba(227, 51, 168, 0.07) 38px 39px);
content: "";
}
.l3r-maintenance-card {
position: absolute;
z-index: 2;
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid var(--l3r-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 18px 38px rgba(227, 51, 168, 0.12);
backdrop-filter: blur(14px);
}
.l3r-maintenance-card-top {
top: 34px;
right: 34px;
animation: l3r-maintenance-card-pop 3.4s ease-in-out infinite;
}
.l3r-maintenance-card span {
color: var(--l3r-muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.l3r-maintenance-card strong {
color: var(--l3r-violet);
font-size: 19px;
}
.l3r-maintenance-character {
position: absolute;
right: 8%;
bottom: 72px;
z-index: 3;
width: min(360px, 76vw);
height: 490px;
transform: translate3d(calc(var(--l3r-mouse-x) * -10px), calc(var(--l3r-mouse-y) * -8px), 0);
transition: transform 160ms ease-out;
}
.l3r-character-head {
position: absolute;
top: 44px;
left: 50%;
width: 132px;
height: 132px;
transform: translateX(-50%);
}
.l3r-character-hair {
position: absolute;
inset: -13px -10px 18px;
border-radius: 46% 54% 42% 58%;
background: linear-gradient(135deg, var(--l3r-violet), var(--l3r-fuchsia));
box-shadow: 0 16px 28px rgba(109, 36, 109, 0.18);
animation: l3r-maintenance-hair 4.4s ease-in-out infinite;
}
.l3r-character-face {
position: absolute;
inset: 20px 16px 0;
border-radius: 50% 50% 46% 46%;
background: #ffe3d4;
box-shadow: inset 0 -8px rgba(236, 176, 160, 0.18);
}
.l3r-character-face::before,
.l3r-character-face::after {
position: absolute;
top: 45px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--l3r-ink);
content: "";
}
.l3r-character-face::before {
left: 28px;
}
.l3r-character-face::after {
right: 28px;
box-shadow: 0 26px 0 -2px var(--l3r-fuchsia);
}
.l3r-character-body {
position: absolute;
top: 178px;
left: 50%;
width: 178px;
height: 208px;
transform: translateX(-50%);
}
.l3r-character-apron {
position: absolute;
inset: 0 18px;
border-radius: 48px 48px 18px 18px;
background: linear-gradient(180deg, #fff, #ffe1f1);
box-shadow: 0 20px 42px rgba(227, 51, 168, 0.2);
}
.l3r-character-apron::before {
position: absolute;
top: 44px;
right: 24px;
left: 24px;
height: 54px;
border: 2px solid rgba(227, 51, 168, 0.26);
border-radius: 8px;
content: "";
}
.l3r-character-arm {
position: absolute;
top: 36px;
width: 38px;
height: 154px;
border-radius: 999px;
background: #ffe3d4;
transform-origin: 50% 18px;
}
.l3r-character-arm-left {
left: -12px;
transform: rotate(18deg);
animation: l3r-maintenance-arm-left 3.2s ease-in-out infinite;
}
.l3r-character-arm-right {
right: -8px;
transform: rotate(-32deg);
animation: l3r-maintenance-arm-right 2.4s ease-in-out infinite;
}
.l3r-character-wrench {
position: absolute;
top: 102px;
left: 2px;
width: 72px;
height: 16px;
border-radius: 999px;
background: #3d3238;
transform: rotate(-26deg);
transform-origin: 12px 50%;
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.16);
}
.l3r-character-wrench::before,
.l3r-character-wrench::after {
position: absolute;
top: 50%;
border: 5px solid #3d3238;
border-radius: 50%;
transform: translateY(-50%);
content: "";
}
.l3r-character-wrench::before {
left: -8px;
width: 18px;
height: 18px;
border-right-color: transparent;
}
.l3r-character-wrench::after {
right: -8px;
width: 12px;
height: 12px;
}
.l3r-character-table {
position: absolute;
right: 8px;
bottom: 46px;
left: 8px;
height: 74px;
border-radius: 14px 14px 42px 42px;
background: linear-gradient(180deg, #fff, #fbd9ec);
box-shadow: 0 18px 40px rgba(109, 36, 109, 0.18);
}
.l3r-character-product {
position: absolute;
bottom: 60px;
left: 72px;
width: 44px;
height: 74px;
border-radius: 10px 10px 8px 8px;
background: linear-gradient(180deg, var(--l3r-fuchsia), var(--l3r-violet));
box-shadow: 0 12px 28px rgba(227, 51, 168, 0.26);
}
.l3r-character-product::before {
position: absolute;
top: -12px;
right: 9px;
left: 9px;
height: 14px;
border-radius: 5px 5px 0 0;
background: #fff;
content: "";
}
.l3r-character-brush {
position: absolute;
right: 58px;
bottom: 70px;
width: 82px;
height: 12px;
border-radius: 999px;
background: #2d2429;
transform: rotate(-15deg);
}
.l3r-character-brush::after {
position: absolute;
right: -20px;
top: -7px;
width: 24px;
height: 26px;
border-radius: 6px 16px 16px 6px;
background: var(--l3r-hot);
content: "";
}
.l3r-character-sparkle {
position: absolute;
z-index: 6;
width: 18px;
height: 18px;
background: var(--l3r-hot);
clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
animation: l3r-maintenance-sparkle 1.9s ease-in-out infinite;
}
.l3r-character-sparkle-one {
top: 70px;
right: 44px;
}
.l3r-character-sparkle-two {
top: 210px;
left: 24px;
animation-delay: -0.8s;
}
.l3r-maintenance-console {
position: absolute;
bottom: 38px;
left: 34px;
z-index: 2;
display: grid;
gap: 9px;
width: 188px;
padding: 16px;
border: 1px solid rgba(227, 51, 168, 0.2);
border-radius: 8px;
background: rgba(23, 16, 20, 0.86);
box-shadow: 0 18px 38px rgba(23, 16, 20, 0.16);
}
.l3r-maintenance-console span {
display: block;
height: 8px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
}
.l3r-maintenance-console span::before {
display: block;
width: 68%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--l3r-fuchsia), var(--l3r-hot));
animation: l3r-maintenance-load 2.4s ease-in-out infinite;
content: "";
}
.l3r-maintenance-console span:nth-child(2)::before {
width: 84%;
animation-delay: -0.8s;
}
.l3r-maintenance-console span:nth-child(3)::before {
width: 52%;
animation-delay: -1.4s;
}
.l3r-maintenance-hint {
position: absolute;
right: 34px;
bottom: 34px;
z-index: 5;
max-width: 190px;
margin: 0;
color: var(--l3r-muted);
font-size: 12px;
font-weight: 900;
line-height: 1.35;
text-align: right;
}
.l3r-maintenance-ticker {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
overflow: hidden;
color: rgba(109, 36, 109, 0.55);
font-size: 12px;
font-weight: 900;
pointer-events: none;
text-transform: uppercase;
}
.l3r-maintenance-ticker div {
display: flex;
width: max-content;
gap: 10px;
animation: l3r-maintenance-marquee 22s linear infinite;
}
.l3r-maintenance-ticker span {
padding: 8px 11px;
border: 1px solid var(--l3r-line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.58);
}
@keyframes l3r-maintenance-drift {
from {
background-position: 0 0, 0 0, 0 0;
}
to {
background-position: 32px 18px, -28px 22px, 80px 0;
}
}
@keyframes l3r-maintenance-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(14px, -18px, 0);
}
}
@keyframes l3r-maintenance-rise {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
@keyframes l3r-maintenance-shine {
to {
transform: translateX(120%);
}
}
@keyframes l3r-maintenance-card-pop {
0%,
100% {
transform: translateY(0) rotate(1deg);
}
50% {
transform: translateY(-8px) rotate(-1deg);
}
}
@keyframes l3r-maintenance-hair {
0%,
100% {
border-radius: 46% 54% 42% 58%;
}
50% {
border-radius: 54% 46% 56% 44%;
}
}
@keyframes l3r-maintenance-arm-left {
0%,
100% {
transform: rotate(18deg);
}
50% {
transform: rotate(9deg);
}
}
@keyframes l3r-maintenance-arm-right {
0%,
100% {
transform: rotate(-32deg);
}
50% {
transform: rotate(-45deg);
}
}
@keyframes l3r-maintenance-sparkle {
0%,
100% {
opacity: 0.35;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.22) rotate(45deg);
}
}
@keyframes l3r-maintenance-load {
0%,
100% {
transform: translateX(-12%);
}
50% {
transform: translateX(26%);
}
}
@keyframes l3r-maintenance-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 940px) {
.l3r-maintenance-shell {
grid-template-columns: 1fr;
}
.l3r-maintenance-workbench {
min-height: 520px;
order: -1;
}
.l3r-maintenance-character {
right: 50%;
transform: translateX(50%);
}
.l3r-maintenance-content {
text-align: center;
}
.l3r-maintenance-logo,
.l3r-maintenance-mark,
.l3r-maintenance-content p:not(.l3r-maintenance-eyebrow),
.l3r-maintenance-status {
margin-right: auto;
margin-left: auto;
}
.l3r-maintenance-actions {
justify-content: center;
}
}
@media (max-width: 640px) {
.l3r-maintenance-stage {
padding: 18px 14px 58px;
}
.l3r-maintenance-workbench {
min-height: 315px;
order: initial;
}
.l3r-maintenance-card-top {
top: 14px;
right: 14px;
padding: 10px 12px;
}
.l3r-maintenance-card strong {
font-size: 15px;
}
.l3r-maintenance-character {
bottom: 4px;
width: 232px;
height: 304px;
}
.l3r-character-head {
top: 18px;
width: 92px;
height: 92px;
}
.l3r-character-body {
top: 124px;
width: 124px;
height: 148px;
}
.l3r-character-table {
bottom: 16px;
height: 58px;
}
.l3r-character-arm {
top: 28px;
width: 30px;
height: 120px;
}
.l3r-character-wrench {
top: 78px;
width: 58px;
}
.l3r-character-product {
bottom: 48px;
left: 56px;
width: 34px;
height: 58px;
}
.l3r-character-brush {
right: 44px;
bottom: 54px;
width: 62px;
}
.l3r-character-face::before,
.l3r-character-face::after {
top: 34px;
}
.l3r-character-face::before {
left: 21px;
}
.l3r-character-face::after {
right: 21px;
}
.l3r-maintenance-logo {
width: 104px;
margin-bottom: 10px;
}
.l3r-maintenance-console,
.l3r-maintenance-hint {
display: none;
}
.l3r-maintenance-content h1 {
font-size: clamp(40px, 14vw, 54px);
}
.l3r-maintenance-content p:not(.l3r-maintenance-eyebrow) {
margin-top: 14px;
font-size: 16px;
line-height: 1.45;
}
.l3r-maintenance-status {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.l3r-maintenance-status span {
min-height: 58px;
padding: 9px 8px;
font-size: 10px;
}
.l3r-maintenance-status strong {
font-size: 15px;
}
.l3r-maintenance-actions {
align-items: stretch;
}
.l3r-maintenance-actions a,
.l3r-maintenance-actions span {
width: 100%;
}
.l3r-maintenance-ticker {
bottom: 12px;
}
}
@media (min-width: 941px) and (max-height: 780px) {
.l3r-maintenance-logo {
width: 118px;
margin-bottom: 10px;
}
.l3r-maintenance-content h1 {
max-width: 640px;
font-size: clamp(44px, 6.3vw, 80px);
}
.l3r-maintenance-content p:not(.l3r-maintenance-eyebrow) {
margin-top: 14px;
font-size: 18px;
}
.l3r-maintenance-actions,
.l3r-maintenance-status {
margin-top: 18px;
}
.l3r-maintenance-status span {
min-height: 58px;
padding: 10px 12px;
}
.l3r-maintenance-workbench {
min-height: 520px;
}
.l3r-maintenance-character {
bottom: 24px;
height: 430px;
}
.l3r-maintenance-card-top {
top: 26px;
right: 26px;
}
.l3r-maintenance-ticker {
opacity: 0.7;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}