.login__wrap:has(.soon) .login__main {
min-height: 560px;
}
@media (min-width: 768px) {
.login__wrap:has(.soon) .login {
background-image: url("../images/login_left-c9cfd4d3642644913339973bb2c48c77.svg"), linear-gradient(180deg, #e7f7fe, #fff);
background-position: 0 15%, 50%;
}
}
@media (min-width: 1200px) {
.login__wrap {
display: flex;
}
.login__wrap:has(.soon) .login__main {
min-height: 100vh;
}
}
.login,
.soon {
flex: 1
}
@media (min-width: 1200px) {
.login {
overflow: hidden;
}
.soon__container {
height: 100vh;
min-height: 100%;
overflow-y: auto;
}
}
.soon {
background: linear-gradient(180deg, #E6007E 0%, #8051FF 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: var(--p-font-family-sans);
font-optical-sizing: auto;
line-height: 1.5;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
position: relative;
}
.soon::before {
content: "";
background: linear-gradient(180deg, #E6007E 0%, #8051FF 100%);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
right: 0;
top: 0;
}
@media (min-width: 1200px) {
.soon {
background-image: url('data:image/svg+xml,');
}
}
.soon__container {
width: 100%;
max-width: 770px;
padding: 1rem;
}
@media (min-width: 768px) {
.soon__container {
padding: 16px 40px;
padding-top: 50px;
}
}
@media (min-width: 1200px) {
.soon__container {
padding: 16px 60px;
padding-top: 50px;
}
}
@media (min-width: 1440px) {
.soon__container {
padding: 16px 60px;
padding-top: 60px;
}
}
@media (min-width: 1820px) {
.soon__container {
padding: 16px;
padding-top: 60px;
}
}
.soon__main {
position: relative;
padding: 4rem 2rem 2rem 2rem;
font-size: 1.125rem;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 12px 20px -8px rgba(26, 26, 26, .24), inset 0 1px 0 0 hsla(0, 0%, 80%, .5), inset 0 -1px 0 0 rgba(0, 0, 0, .17), inset -1px 0 0 0 rgba(0, 0, 0, .13), inset 1px 0 0 0 rgba(0, 0, 0, .13);
}
.soon__decoration {
position: absolute;
left: 0;
right: 0;
margin: 0 auto !important;
top: -24px;
z-index: 1;
display: flex;
width: 55px;
height: 48px;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
}
@media (min-width: 768px) {
.soon__decoration {
width: 83px;
height: 72px;
font-size: 30px;
top: -36px;
}
}
.soon__decoration::before {
content: "";
background-image: url('data:image/svg+xml,');
width: 55px;
height: 48px;
position: absolute;
z-index: -1;
left: 0;
top: 0;
background-size: contain;
filter: brightness(0) saturate(100%) invert(30%) sepia(19%) saturate(2969%) hue-rotate(193deg) brightness(93%) contrast(95%);
}
@media (min-width: 768px) {
.soon__decoration::before {
width: 83px;
height: 72px;
}
}
.soon__main h2 {
margin: 0 0 1rem 0;
font-weight: 700;
}
.soon__main p {
margin: 0 0 1rem;
}
.soon__text {
max-width: 36rem;
}
.soon__head {
display: flex;
color: #fff;
padding: 0 0 6vh 0;
font-weight: 500;
}
@media (min-width: 768px) {
.soon__head {
padding: 0 0 8vh 0;
}
}
@media (min-width: 1400px) {
.soon__head {
padding: 0 0 12vh 0;
}
}
.soon__head::before {
content: "";
flex: 1 0 auto;
}
.soon__head__content {
padding-left: 4rem;
background-image: url("../images/login_ai-5620fbe51700a7af03987ae0766ffe54.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 40px;
}
@media (min-width: 768px) {
.soon__head__content {
padding-left: 6rem;
background-size: 70px;
}
}
.soon__head h1 {
margin: 0;
padding: 2vh 0;
font-weight: 700;
font-size: 22px;
text-transform: uppercase;
}
.soon__head p {
margin: 0;
max-width: 26rem;
font-size: 16px;
}
@media (min-width: 1200px) {
.soon__head h1 {
padding: 1rem 0 1rem 0;
font-size: 22px;
}
.soon__head p {
font-size: 20px;
}
.soon__head__content {
padding-left: 7.5rem;
background-size: 100px;
}
}
.soon__foot {
color: #fff;
padding-top: 4vh;
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 320px) {
.soon__foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
gap: 0;
padding-top: 30px;
}
}
@media (min-width: 1400px) {
.soon__foot {
padding-top: 5vh;
font-size: 1.3rem;
}
}
.soon__foot ul {
margin: 0;
padding: 0;
list-style: none;
}
.soon__foot li {
padding: 0.125rem 0 0.125rem 2rem;
background-image: url('data:image/svg+xml,');
background-size: 20px;
background-repeat: no-repeat;
background-position: left;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(318deg) brightness(103%) contrast(103%);
}
@media (min-width: 1400px) {
.soon__foot li {
background-size: 29px;
padding: 0.5rem 0 0.5rem 2.5rem;
}
}
.soon__button {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s;
transition-delay: 0.5s;
}
.soon_SkeletonThumbnail--active+.soon__button {
opacity: 1;
visibility: visible;
}
.soon__button a {
/*background: #22d6ab;*/
background: #fff;
display: flex;
padding: 0 1rem;
height: 40px;
justify-content: center;
align-items: center;
color: #000000;
font-size: 16px;
text-decoration: none;
font-weight: 500;
border-radius: 10px;
white-space: nowrap;
box-shadow: 0 10px 20px rgb(3, 4, 14, 0.62);
transition: all 0.4s ease;
}
@media (min-width: 768px) {
.soon__button a {
font-size: 18px;
width: 200px;
height: 50px;
}
}
.soon__button a:hover {
background: #FFFFFF;
color: #8151FD;
box-shadow: 0 10px 20px rgb(3, 4, 14, 0.62);
transform: scale(1.1);
}
.soon__skeleton {
font-size: 16px;
}
@media (min-width: 768px) {
.soon__skeleton {
font-size: 18px;
}
}
.SkeletonBodyTextContainer #text1 {
color: #5700d1;
font-weight: 700
}
.SkeletonBodyTextContainer #text2 {
color: #5700d1;
}
.soon_SkeletonBodyText {
position: relative;
overflow: hidden;
height: auto;
height: 0.625rem;
display: flex;
border-radius: var(--p-border-radius-100);
background-color: #d7c8ff;
margin-bottom: 1rem;
white-space: normal;
flex-wrap: wrap;
margin-bottom: 10px;
}
.soon_SkeletonThumbnail {
position: relative;
overflow: hidden;
border-radius: 8px;
background-color: #d7c8ff;
width: 100px;
height: 100px;
margin-top: 10px;
}
.soon_SkeletonThumbnail img {
display: block;
max-width: 100%;
visibility: hidden;
}
.soon_SkeletonThumbnail--active img {
visibility: visible;
}
.soon_SkeletonThumbnail--active::before {
content: normal;
display: none;
}
.soon_SkeletonBodyText::before,
.soon_SkeletonThumbnail::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: translateX(-100%);
animation: skeleton 1s ease-in-out infinite;
}
@keyframes skeleton {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.soon__SkeletonImage {
justify-content: space-between;
align-items: flex-end;
}
@media (min-width: 480px) {
.soon__SkeletonImage {
display: flex;
}
}