html {
background: #ECE9E6; background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6); background: linear-gradient(to right, #FFFFFF, #ECE9E6); }
body.wploti-maintenance-animation {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
text-align: center;
overflow: hidden;
gap: 2vh;
width: 75vw;
height: 75vh;
margin: 10vh auto;
}
.title {
color: #ffcd46;
font-family: cursive;
}
.title a {
text-decoration: none;
color: #89add3;
} @media screen and (max-width : 800px) { body {
gap: 5vh;
}
}
.wploti-access-controls {
position: fixed;
top: 50%;
right: 0;
z-index: 10001;
display: flex;
flex-direction: column;
gap: 8px;
transform: translateY(-50%);
transition: opacity .2s ease, visibility .2s ease;
}
body.wploti-panel-open .wploti-access-controls {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.wploti-access-trigger {
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 6px 0 0 6px;
background: #1d4ed8;
color: #fff;
cursor: pointer;
font-size: 24px;
}
.wploti-access-trigger:focus-visible,
.wploti-access-panel button:focus-visible,
.wploti-access-panel input:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.wploti-access-panel {
position: fixed;
top: 50%;
right: 32px;
z-index: 10002;
box-sizing: border-box;
width: min(100% - 40px, 380px);
max-height: calc(100% - 64px);
overflow-y: auto;
padding: 44px 36px;
background: #1d4ed8; color: #f9fafb;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 16px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 20px 50px rgba(8, 7, 16, .45);
transform: translateY(-50%) translateX(calc(100% + 48px));
opacity: 0;
visibility: hidden;
transition: transform .32s ease, opacity .32s ease, visibility 0s linear .32s;
}
.wploti-access-panel.is-open {
transform: translateY(-50%) translateX(0);
opacity: 1;
visibility: visible;
transition: transform .32s ease, opacity .32s ease;
}
.wploti-access-panel h2 {
margin: 0 0 28px;
color: #fff;
font-size: 26px;
font-weight: 600;
text-align: center;
}
.wploti-access-panel label {
display: block;
margin: 22px 0 8px;
color: #f1f3fb;
font-size: 14px;
font-weight: 500;
letter-spacing: .3px;
text-align: left;
}
.wploti-access-panel input {
box-sizing: border-box;
width: 100%;
height: 48px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 6px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 15px;
}
.wploti-access-panel input::placeholder {
color: #d8dcec;
}
.wploti-access-panel input:focus {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .35);
}
.wploti-access-panel form>button {
width: 100%;
margin-top: 30px;
padding: 13px 0;
border: 0;
border-radius: 6px;
background: #ffffff;
color: #111827;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background .2s ease;
}
.wploti-access-panel form>button:hover {
background: #e5e7eb;
}
.wploti-panel-close {
position: absolute;
top: 16px;
right: 18px;
border: 0;
background: rgba(255, 255, 255, .08);
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.wploti-panel-error {
margin: 18px 0 0;
color: #fca5a5;
font-size: 13px;
text-align: center;
}
@media screen and (max-width: 480px) {
.wploti-access-panel {
right: 50%;
width: calc(100% - 32px);
transform: translateY(-50%) translateX(calc(50% + 100%));
}
.wploti-access-panel.is-open {
transform: translateY(-50%) translateX(50%);
}
}