/* =========================================================
   TOP MASTER NAVBAR
   File: css/navbar.css
   ========================================================= */

:root {
    --nav-bg:
        rgba(
            3,
            7,
            18,
            0.94
        );

    --nav-border:
        rgba(
            153,
            160,
            205,
            0.12
        );

    --nav-purple:
        #b778ff;

    --nav-purple-soft:
        #d5afff;

    --nav-text:
        #ffffff;

    --nav-muted:
        rgba(
            210,
            195,
            238,
            0.42
        );
}


/* =========================================================
   NAVBAR CONTAINER
   ========================================================= */

.top-navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;


    height:
        84px;


    padding:
        0
        clamp(
            22px,
            4vw,
            64px
        );


    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;


    border-bottom:
        1px
        solid
        var(--nav-border);


    background:
        linear-gradient(
            180deg,
            rgba(
                3,
                7,
                18,
                0.98
            )
            0%,

            rgba(
                3,
                7,
                18,
                0.88
            )
            100%
        );


    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* =========================================================
   LOGO
   ========================================================= */

.top-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;


    flex-shrink:
        0;


    color:
        #ffffff;

    text-decoration:
        none;
}


.top-brand-main {

    color:
        #c58aff;


    font-family:
        Georgia,
        "Times New Roman",
        serif;


    font-size:
        34px;

    font-style:
        italic;

    font-weight:
        900;


    line-height:
        1;


    letter-spacing:
        -0.07em;


    text-shadow:
        0
        0
        24px
        rgba(
            179,
            108,
            255,
            0.24
        );
}


.top-brand-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.top-brand-cn {

    color:
        rgba(
            255,
            255,
            255,
            0.93
        );


    font-size:
        14px;

    font-weight:
        700;


    letter-spacing:
        0.24em;


    white-space:
        nowrap;
}


.top-brand-en {

    color:
        rgba(
            255,
            255,
            255,
            0.30
        );


    font-size:
        7px;

    font-weight:
        600;


    letter-spacing:
        0.38em;


    white-space:
        nowrap;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.top-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;


    gap:
        12px;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.top-nav-item {

    position:
        relative;


    min-width:
        132px;

    height:
        58px;


    padding:
        0
        16px;


    display:
        flex;

    align-items:
        center;

    gap:
        13px;


    border:
        1px
        solid
        rgba(
            143,
            151,
            191,
            0.13
        );


    border-radius:
        13px;


    background:
        linear-gradient(
            180deg,
            rgba(
                16,
                23,
                42,
                0.66
            ),
            rgba(
                8,
                14,
                29,
                0.72
            )
        );


    color:
        var(--nav-text);


    text-decoration:
        none;


    transition:
        transform
        180ms
        ease,

        border-color
        180ms
        ease,

        background
        180ms
        ease,

        box-shadow
        180ms
        ease;
}


/* hover */

.top-nav-item:hover {

    transform:
        translateY(
            -1px
        );


    border-color:
        rgba(
            175,
            116,
            255,
            0.40
        );


    background:
        linear-gradient(
            180deg,
            rgba(
                34,
                31,
                68,
                0.82
            ),
            rgba(
                16,
                20,
                43,
                0.82
            )
        );


    box-shadow:
        0
        8px
        26px
        rgba(
            76,
            43,
            158,
            0.10
        );
}


/* Current page */

.top-nav-item.active {

    border-color:
        rgba(
            167,
            105,
            255,
            0.58
        );


    background:
        radial-gradient(
            circle
            at
            10%
            50%,

            rgba(
                158,
                89,
                255,
                0.18
            ),

            transparent
            40%
        ),

        linear-gradient(
            180deg,
            rgba(
                34,
                28,
                71,
                0.88
            ),

            rgba(
                14,
                18,
                42,
                0.88
            )
        );


    box-shadow:
        inset
        0
        0
        18px
        rgba(
            133,
            74,
            225,
            0.05
        ),

        0
        8px
        28px
        rgba(
            94,
            53,
            192,
            0.09
        );
}


/* purple line under active item */

.top-nav-item.active::after {

    content:
        "";


    position:
        absolute;


    left:
        20%;

    right:
        20%;

    bottom:
        -1px;


    height:
        2px;


    border-radius:
        999px;


    background:
        linear-gradient(
            90deg,
            #8b5cff,
            #d4a8ff
        );


    box-shadow:
        0
        0
        12px
        rgba(
            174,
            108,
            255,
            0.62
        );
}


/* =========================================================
   ICON
   ========================================================= */

.top-nav-icon {

    width:
        27px;


    flex:
        0
        0
        27px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    color:
        #ffffff;


    font-size:
        22px;

    line-height:
        1;
}


/* =========================================================
   NAV COPY
   ========================================================= */

.top-nav-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;


    min-width:
        0;
}


.top-nav-cn {

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );


    font-size:
        13px;

    font-weight:
        760;


    white-space:
        nowrap;
}


.top-nav-en {

    color:
        var(--nav-muted);


    font-size:
        7px;

    font-weight:
        650;


    letter-spacing:
        0.18em;


    white-space:
        nowrap;
}


/* =========================================================
   MOBILE HAMBURGER
   ========================================================= */

.menu-toggle {

    display:
        none;


    width:
        44px;

    height:
        44px;


    padding:
        8px;


    border:
        1px
        solid
        rgba(
            171,
            131,
            235,
            0.18
        );


    border-radius:
        50%;


    background:
        rgba(
            10,
            15,
            31,
            0.62
        );


    cursor:
        pointer;
}


.menu-toggle span {

    display:
        block;


    width:
        19px;

    height:
        2px;


    margin:
        4px
        auto;


    border-radius:
        999px;


    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {

    position:
        fixed;


    inset:
        0;


    z-index:
        2000;


    padding:
        22px
        18px
        28px;


    display:
        flex;

    flex-direction:
        column;


    opacity:
        0;

    visibility:
        hidden;


    transform:
        translateY(
            -8px
        );


    background:
        radial-gradient(
            circle
            at
            20%
            0%,

            rgba(
                132,
                73,
                224,
                0.16
            ),

            transparent
            35%
        ),

        linear-gradient(
            180deg,
            rgba(
                4,
                9,
                23,
                0.995
            ),

            rgba(
                3,
                8,
                18,
                0.995
            )
        );


    transition:
        220ms
        ease;
}


.mobile-menu.open {

    opacity:
        1;

    visibility:
        visible;


    transform:
        translateY(
            0
        );
}


/* Header inside mobile menu */

.mobile-menu-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;


    gap:
        18px;
}


.menu-close {

    width:
        44px;

    height:
        44px;


    display:
        grid;

    place-items:
        center;


    border:
        0;


    background:
        transparent;


    color:
        rgba(
            255,
            255,
            255,
            0.92
        );


    font-size:
        34px;

    font-weight:
        200;


    cursor:
        pointer;
}


/* =========================================================
   MOBILE NAV ITEMS
   ========================================================= */

.mobile-menu-list {

    margin-top:
        48px;


    display:
        grid;

    gap:
        12px;
}


.mobile-menu-list > a {

    min-height:
        68px;


    padding:
        0
        17px;


    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;


    border:
        1px
        solid
        rgba(
            143,
            151,
            191,
            0.15
        );


    border-radius:
        15px;


    background:
        linear-gradient(
            180deg,
            rgba(
                15,
                23,
                42,
                0.70
            ),

            rgba(
                7,
                13,
                28,
                0.74
            )
        );


    color:
        #ffffff;


    text-decoration:
        none;
}


.mobile-menu-list a small {

    margin-top:
        4px;


    color:
        rgba(
            204,
            182,
            232,
            0.42
        );


    font-size:
        8px;


    letter-spacing:
        0.18em;
}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */

.mobile-menu-footer {

    margin-top:
        auto;


    padding-top:
        28px;


    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;


    color:
        rgba(
            177,
            127,
            233,
            0.42
        );
}


.social-row {

    display:
        flex;

    gap:
        16px;


    margin-bottom:
        20px;
}


.social-row span {

    width:
        34px;

    height:
        34px;


    display:
        grid;

    place-items:
        center;


    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.14
        );


    border-radius:
        50%;


    color:
        rgba(
            255,
            255,
            255,
            0.74
        );


    font-size:
        11px;
}


.menu-signature {

    font-family:
        Georgia,
        serif;


    font-size:
        12px;

    font-style:
        italic;


    line-height:
        1.55;


    text-align:
        center;
}


/* =========================================================
   DESKTOP SHRINKING
   ========================================================= */

@media (
    max-width:
    1280px
) {

    .top-navbar {

        padding:
            0
            24px;

    }


    .top-nav-item {

        min-width:
            118px;


        padding:
            0
            13px;

    }


    .top-nav {

        gap:
            8px;

    }


    .top-nav-cn {

        font-size:
            12px;

    }


    .top-nav-en {

        font-size:
            6.5px;

    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (
    max-width:
    1050px
) {

    .top-navbar {

        height:
            76px;


        padding:
            0
            18px;

    }


    .top-nav {

        display:
            none;

    }


    .menu-toggle {

        display:
            block;

    }


    .top-brand-main {

        font-size:
            30px;

    }


    .top-brand-cn {

        font-size:
            12px;

        letter-spacing:
            0.18em;

    }


    .top-brand-en {

        font-size:
            6px;

        letter-spacing:
            0.30em;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
    max-width:
    480px
) {

    .top-navbar {

        padding:
            0
            13px;

    }


    .top-brand {

        gap:
            9px;

    }


    .top-brand-main {

        font-size:
            27px;

    }


    .top-brand-cn {

        font-size:
            10px;

    }


    .top-brand-en {

        font-size:
            5.5px;

    }


    .mobile-menu {

        padding:
            18px
            14px
            24px;

    }

}

/* Active state in the master mobile menu */
.mobile-menu-list > a.active {
    border-color: rgba(167, 105, 255, 0.56);
    background:
        radial-gradient(circle at 0 50%, rgba(154, 86, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(19, 22, 50, 0.86), rgba(10, 15, 36, 0.86));
}