Current








/* ==========================================================
   CENCRAFT AUTHENTIK v2
   ========================================================== */

:root{

    /* =======================================================
       CENCRAFT BRAND
       ======================================================= */

    --ak-accent:#22d3ee;

    --ak-dark-background:#05080d;
    --ak-dark-background-light:#091018;
    --ak-dark-background-lighter:#111827;

    --ak-global--background-image:
        linear-gradient(
            rgba(5,8,13,.72),
            rgba(5,8,13,.84)
        ),
        url("https://css.cencraft.net/images/login-bg.webp");

    --ak-font-family-heading:"Inter",sans-serif;
    --ak-font-family-sans-serif:"Inter",sans-serif;

    /* =======================================================
       LOGIN CARD
       ======================================================= */

    --ak-c-login__main--BackgroundColor:rgba(11,17,24,.74);

    --ak-c-login__main--Color:#F8FAFC;

    --ak-c-login__main--BoxShadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 35px rgba(34,211,238,.10);

    --ak-c-login__main-ColumnWidth:520px;

    /* =======================================================
       PATTERNFLY
       ======================================================= */

    --pf-global--primary-color--100:#22d3ee;
    --pf-global--primary-color--200:#06b6d4;
    --pf-global--primary-color--dark-100:#0891b2;

    --pf-global--BackgroundColor--100:#05080d;
    --pf-global--BackgroundColor--200:#091018;

    --pf-global--Color--100:#ffffff;
    --pf-global--Color--200:#cbd5e1;
    --pf-global--Color--300:#94a3b8;

    --pf-global--BorderColor--100:rgba(34,211,238,.16);

    --pf-global--BorderRadius--sm:14px;
    --pf-global--BorderRadius--lg:20px;

    --pf-global--link--Color:#22d3ee;

}


/* ==========================================================
   PAGE
   ========================================================== */

body{

    background:var(--ak-global--background-image);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#ffffff;

}


/* ==========================================================
   LOGIN CARD
   ========================================================== */

.pf-c-login__main{

    background:rgba(11,17,24,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(34,211,238,.15);

    border-radius:20px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 35px rgba(34,211,238,.08);

    overflow:hidden;

}


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

.pf-c-brand{

    padding-top:42px;

    padding-bottom:16px;

}

.pf-c-brand img{

    width:270px;

    max-width:100%;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1{

    color:#ffffff;

    font-size:2.5rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:12px;

}

p{

    color:#94a3b8;

}


/* ==========================================================
   LABELS
   ========================================================== */

label{

    color:#e2e8f0;

    font-weight:600;

}


/* ==========================================================
   INPUTS
   ========================================================== */

input{

    background:#101827 !important;

    color:#ffffff !important;

    border:1px solid #1e293b !important;

    border-radius:14px !important;

    height:56px;

    padding:0 18px;

    transition:all .2s ease;

}

input::placeholder{

    color:#64748b;

}

input:focus{

    border-color:#22d3ee !important;

    box-shadow:
        0 0 0 4px rgba(34,211,238,.10),
        0 0 18px rgba(34,211,238,.20);

}


/* Make typed text white */

input,
input:focus,
input:active{

    color:#ffffff !important;

    -webkit-text-fill-color:#ffffff !important;

}


/* ==========================================================
   BUTTON
   ========================================================== */

button.pf-m-primary{

    height:58px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #38dfff,
            #1498cc
        ) !important;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    transition:all .22s ease;

    box-shadow:
        0 0 20px rgba(34,211,238,.18);

}

button.pf-m-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(34,211,238,.28);

}


/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:#22d3ee !important;

    transition:.2s;

}

a:hover{

    color:#67e8f9 !important;

}


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

.pf-c-login__footer{

    opacity:.45;

}


/* ==========================================================
   ANIMATION
   ========================================================== */

.pf-c-login__main{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(14px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   Remove "Powered by Authentik"
   ========================================== */

.pf-c-login__footer{
    display:none !important;
}