/* ==========================================================
   FFXIVPenumbra.com
   PREMIUM STICKY HEADER
   Sword Emblem Version
   Fonts: Outfit + Roboto
   ========================================================== */


/* ==========================================================
   FONTS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Roboto:wght@400;500;600;700&display=swap');



/* ==========================================================
   BASIC RESET
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {
    font-family:
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #071a36;

    background: #ffffff;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}



/* ==========================================================
   STICKY HEADER
   ========================================================== */

.site-header {
    position: sticky;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    height: 70px;

    z-index: 9999;

    isolation: isolate;
}



/* ==========================================================
   HEADER BACKGROUND
   ========================================================== */

.site-header::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 10;

    background:
        rgba(255, 255, 255, .95);

    border-bottom:
        1px solid rgba(15, 66, 111, .075);

    box-shadow:
        0 5px 20px
        rgba(7, 26, 54, .055);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    pointer-events: none;
}



/* ==========================================================
   HEADER CONTAINER
   ========================================================== */

.header-container {
    position: relative;

    z-index: 40;

    width:
        min(1220px, calc(100% - 56px));

    height: 100%;

    margin:
        0 auto;

    display: flex;

    align-items: center;
}



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

.site-logo {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    min-width: 0;
}



/* ==========================================================
   SWORD EMBLEM
   ========================================================== */

.logo-symbol {
    position: relative;

    width: 43px;

    height: 43px;

    flex:
        0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.logo-symbol img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 4px 9px
            rgba(19, 119, 201, .18)
        );

    transition:
        transform 180ms ease,
        filter 180ms ease;
}



/* Sword logo hover */

.site-logo:hover .logo-symbol img {
    transform:
        translateY(-1px)
        scale(1.035);

    filter:
        drop-shadow(
            0 6px 12px
            rgba(19, 119, 201, .25)
        );
}



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

.logo-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.logo-name {
    color:
        #071a36;

    font-family:
        "Outfit",
        sans-serif;

    font-size:
        21px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -.75px;

    white-space:
        nowrap;
}


.logo-name span {
    color:
        #1377c9;
}


.logo-tagline {
    margin-top:
        5px;

    color:
        #78879a;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        7px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        1.05px;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}



/* ==========================================================
   MAIN NAVIGATION
   ========================================================== */

.main-navigation {
    display: flex;

    align-items: center;

    gap:
        27px;

    margin-left:
        auto;

    margin-right:
        24px;
}


.main-navigation a {
    position: relative;

    height:
        70px;

    display: flex;

    align-items: center;

    color:
        #18304d;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        13.5px;

    line-height:
        1;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:
        color 180ms ease;
}


.main-navigation a:hover {
    color:
        #1377c9;
}



/* ==========================================================
   ACTIVE NAVIGATION
   ========================================================== */

.main-navigation a.active {
    color:
        #1377c9;
}


.main-navigation a.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom:
        8px;

    height:
        2px;

    border-radius:
        99px;

    background:
        #1377c9;
}



/* ==========================================================
   HEADER ACTIONS
   ========================================================== */

.header-actions {
    display: flex;

    align-items: center;

    gap:
        10px;
}



/* ==========================================================
   GET STARTED BUTTON
   ========================================================== */

.header-start-button {
    min-height:
        40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        7px;

    padding:
        0 16px;

    border:
        1px solid #1377c9;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        #1377c9;

    box-shadow:
        0 7px 18px
        rgba(19, 119, 201, .17);

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.header-start-button:hover {
    transform:
        translateY(-1px);

    border-color:
        #0f69b4;

    background:
        #0f69b4;

    box-shadow:
        0 10px 24px
        rgba(19, 119, 201, .23);
}


.header-start-button svg {
    width:
        15px;

    height:
        15px;

    flex:
        0 0 auto;
}



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

.mobile-menu-button {
    display: none;

    width:
        40px;

    height:
        40px;

    padding:
        0;

    border:
        1px solid #d8e3eb;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        0 3px 10px
        rgba(7, 26, 54, .04);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap:
        4.5px;
}


.mobile-menu-button span {
    display: block;

    width:
        18px;

    height:
        2px;

    border-radius:
        20px;

    background:
        #071a36;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}



/* ==========================================================
   HAMBURGER ACTIVE
   ========================================================== */

.mobile-menu-button.is-active span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}


.mobile-menu-button.is-active span:nth-child(2) {
    opacity:
        0;
}


.mobile-menu-button.is-active span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}



/* ==========================================================
   SMALLER DESKTOP
   ========================================================== */

@media (max-width: 1180px) {

    .header-container {
        width:
            calc(100% - 40px);
    }


    .main-navigation {
        gap:
            21px;

        margin-right:
            20px;
    }


    .main-navigation a {
        font-size:
            13px;
    }


    .logo-symbol {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }


    .logo-name {
        font-size:
            20px;
    }


    .logo-tagline {
        font-size:
            6.7px;
    }


    .header-start-button {
        padding:
            0 14px;
    }

}



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

@media (max-width: 980px) {

    .site-header {
        height:
            64px;
    }


    .header-container {
        width:
            calc(100% - 30px);
    }



    /* Sword logo */

    .logo-symbol {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .logo-name {
        font-size:
            20px;
    }


    .logo-tagline {
        font-size:
            6.7px;

        letter-spacing:
            .9px;
    }



    /* Hide Get Started */

    .header-start-button {
        display:
            none;
    }



    /* Show hamburger */

    .mobile-menu-button {
        display:
            flex;

        margin-left:
            auto;
    }



    /* ======================================================
       MOBILE DROPDOWN
       ====================================================== */

    .main-navigation {
        position: absolute;

        top:
            calc(100% - 3px);

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            2px;

        margin:
            0;

        padding:
            9px;

        border:
            1px solid #dbe6ed;

        border-radius:
            10px;

        background:
            rgba(255, 255, 255, .985);

        box-shadow:
            0 18px 45px
            rgba(7, 26, 54, .12);

        backdrop-filter:
            blur(18px);

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


    .main-navigation.is-open {
        display:
            flex;
    }


    .main-navigation a {
        width:
            100%;

        height:
            auto;

        padding:
            12px 14px;

        border-radius:
            7px;

        font-size:
            14px;

        font-weight:
            600;
    }


    .main-navigation a:hover,
    .main-navigation a.active {
        color:
            #1377c9;

        background:
            #f1f7fb;
    }


    .main-navigation a.active::after {
        display:
            none;
    }

}



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

@media (max-width: 600px) {

    .site-header {
        height:
            58px;
    }


    .header-container {
        width:
            calc(100% - 24px);
    }



    /* Sword icon */

    .logo-symbol {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;
    }


    .site-logo {
        gap:
            8px;
    }


    .logo-name {
        font-size:
            18px;

        letter-spacing:
            -.55px;
    }


    .logo-tagline {
        display:
            none;
    }


    .mobile-menu-button {
        width:
            37px;

        height:
            37px;
    }


    .main-navigation {
        top:
            calc(100% - 2px);

        border-radius:
            9px;
    }

}



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

@media (max-width: 360px) {

    .header-container {
        width:
            calc(100% - 18px);
    }


    .logo-symbol {
        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;
    }


    .site-logo {
        gap:
            7px;
    }


    .logo-name {
        font-size:
            16.5px;
    }

}