/*
 * Vareonis / 衍界
 * Brand System v2
 */


/* ============================================================
   SIDEBAR BRAND MARK
   ============================================================ */

.vareonis-logo {
    display: grid;
    place-items: center;

    overflow: visible;

    border:
        1px solid
        rgba(68, 211, 255, .10)
        !important;

    background:
        radial-gradient(
            circle at center,
            rgba(66, 205, 255, .045),
            transparent 68%
        )
        !important;

    box-shadow:
        inset 0 0 18px
        rgba(72, 211, 255, .025),
        0 0 24px
        rgba(85, 119, 255, .025)
        !important;
}


.vareonis-logo img {
    display: block;

    width: 90%;
    height: 90%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 6px
            rgba(68, 219, 255, .08)
        );
}


/* ============================================================
   SIDEBAR WORDMARK
   ============================================================ */

.vareonis-wordmark strong {
    color: #f4f8ff;

    font-weight: 610;

    letter-spacing: .11em;
}


.vareonis-wordmark small {
    color: #66daf6;

    letter-spacing: .18em;
}


/* ============================================================
   LOGIN BRAND CORE
   ============================================================ */

.vareonis-future-login
.core-symbol {
    width: 126px;
    height: 126px;

    border: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


.vareonis-future-login
.core-symbol img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform:
        none !important;

    filter:
        drop-shadow(
            0 0 12px
            rgba(73, 214, 255, .10)
        )
        drop-shadow(
            0 0 18px
            rgba(121, 83, 255, .055)
        );
}


/*
 * Old login orbital rings stay behind
 * the new brand mark, but become quieter.
 */

.vareonis-future-login
.core-ring-a {
    opacity: .32;
}


.vareonis-future-login
.core-ring-b {
    opacity: .22;
}


.vareonis-future-login
.core-ring-c {
    opacity: .16;
}


.vareonis-future-login
.core-axis {
    opacity: .08;
}


/* ============================================================
   LOGIN WORDMARK
   ============================================================ */

.vareonis-future-login
.identity-brand h1 {
    color: #f4f7fb;

    font-weight: 520;

    letter-spacing: .055em;
}


.vareonis-future-login
.identity-cn {
    background:
        linear-gradient(
            90deg,
            #4edcff,
            #8970ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    font-weight: 560;

    letter-spacing: .48em;
}


/* ============================================================
   SMALL ICON MODE
   ============================================================ */

@media (max-width: 780px) {

    .vareonis-future-login
    .core-symbol {
        width: 90px;
        height: 90px;
    }

}