/* ==========================================================
   888 CAPITAL — APPROVED SHARED BACKGROUND
   ========================================================== */


/* LOGIN */

.scene {
    min-height: 100vh !important;

    background:
        linear-gradient(
            rgba(0,5,14,.10),
            rgba(0,5,14,.20)
        ),
        url("/assets/img/888-global-market-background.webp")
        center center / cover
        no-repeat !important;
}


/* Remove the old fake HTML scenery */

.scene > .globe,
.scene > .market-card {
    display: none !important;
}


/* Smaller login panel */

.login-card {
    width: min(485px, calc(100vw - 40px)) !important;

    padding:
        48px
        38px
        40px !important;

    margin: auto !important;
}


/* HOME */

html,
body.has-888-global-background {
    min-height: 100%;
}

body.has-888-global-background {
    background-color: #020811 !important;
}


/* One real background image behind the entire homepage */

body.has-888-global-background::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(0,5,14,.08),
            rgba(0,5,14,.22)
        ),
        url("/assets/img/888-global-market-background.webp")
        center center / cover
        no-repeat;
}


/* Keep website content above it */

body.has-888-global-background > * {
    position: relative;
    z-index: 1;
}


/* Old homepage hero imagery is disabled here */

.888-clear-old-home-background {
    background-image: none !important;
    background-color: transparent !important;
}


/* HALF SCREEN / TABLET */

@media (min-width: 701px) and (max-width: 1100px) {

    .login-card {
        width: min(445px, calc(100vw - 34px)) !important;

        padding:
            44px
            32px
            36px !important;
    }

    .scene,
    body.has-888-global-background::before {
        background-position:
            center center !important;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .scene {
        padding: 18px 12px !important;

        background:
            linear-gradient(
                rgba(0,5,14,.08),
                rgba(0,5,14,.22)
            ),
            url("/assets/img/888-global-market-background-mobile.webp")
            center center / cover
            no-repeat !important;
    }

    body.has-888-global-background::before {
        background:
            linear-gradient(
                rgba(0,5,14,.08),
                rgba(0,5,14,.22)
            ),
            url("/assets/img/888-global-market-background-mobile.webp")
            center center / cover
            no-repeat !important;
    }

    .login-card {
        width: min(92vw, 410px) !important;

        padding:
            36px
            21px
            30px !important;
    }

    .brand-888 {
        font-size: 50px !important;
    }

    .brand-capital {
        font-size: 35px !important;
    }

    .tagline {
        font-size: 8px !important;
        letter-spacing: 1.5px !important;
    }

    .field input {
        height: 56px !important;
    }

    .enter-btn {
        height: 60px !important;
    }
}

/* ==========================================================
   FORCE OLD HOME HERO ARTWORK OFF
   ========================================================== */

body.has-888-global-background .888-home-bg-host {
    background-image: none !important;
    background-color: transparent !important;
}

body.has-888-global-background .888-home-bg-host::before,
body.has-888-global-background .888-home-bg-host::after {
    background-image: none !important;
    background-color: transparent !important;
}

body.has-888-global-background
.888-home-bg-host
.888-old-large-background-media {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}