/*
 * Butterfly Liquid Glass
 *
 * liquid-glass.css
 *
 * Version:
 * v3.3
 *
 * Surface System
 *
 */


/* =====================================================
   Article Card

   Surface 1

===================================================== */


#recent-posts .recent-post-item {


    position:relative;


    overflow:hidden;



    border-radius:

    var(--lg-radius-xl);



    background:

    var(--lg-surface-1-light)

    !important;



    backdrop-filter:

    blur(

        var(--lg-blur-heavy)

    )

    saturate(180%);



    -webkit-backdrop-filter:

    blur(

        var(--lg-blur-heavy)

    )

    saturate(180%);



    border:


    1px solid

    rgba(255,255,255,.55);



    box-shadow:


    inset

    0

    3px

    18px

    rgba(255,255,255,.65),



    inset

    0

    -20px

    40px

    rgba(0,0,0,.04),



    0

    25px

    80px

    rgba(0,0,0,.14);



    transition:


    transform .35s ease,

    box-shadow .35s ease;



}





/* =====================================================
   Card Reflection

===================================================== */


#recent-posts .recent-post-item::before {


    content:"";


    position:absolute;


    inset:0;


    pointer-events:none;



    background:


    linear-gradient(

        135deg,

        rgba(255,255,255,.75),

        transparent 40%

    );



    opacity:


    .32;



}





#recent-posts .recent-post-item::after {


    content:"";


    position:absolute;


    inset:

    1px;



    border-radius:


    inherit;



    pointer-events:none;



    background:


    radial-gradient(

        circle at top left,

        rgba(255,255,255,.25),

        transparent 40%

    );



    opacity:


    .35;



}





/* =====================================================
   Hover

===================================================== */


#recent-posts .recent-post-item:hover {


    transform:


    translateY(-8px);



    box-shadow:


    inset

    0

    3px

    18px

    rgba(255,255,255,.8),



    0

    35px

    90px

    rgba(0,0,0,.2);



}





/* =====================================================
   Article Image

===================================================== */


#recent-posts .post_cover img {


    border-radius:


    var(--lg-radius-lg);



}





/* =====================================================
   Sidebar

   Surface 2

===================================================== */


#aside-content .card-widget {


    position:relative;


    overflow:hidden;



    border-radius:


    var(--lg-radius-lg);



    background:


    var(--lg-surface-2-light)

    !important;



    backdrop-filter:


    blur(

        var(--lg-blur-medium)

    )

    saturate(160%);



    -webkit-backdrop-filter:


    blur(

        var(--lg-blur-medium)

    )

    saturate(160%);



    border:


    1px solid

    var(--lg-border-light);



    box-shadow:


    var(--lg-elevation-2);



}





/* =====================================================
   Sidebar Reflection

===================================================== */


#aside-content .card-widget::before {


    content:"";


    position:absolute;


    inset:0;


    pointer-events:none;



    background:


    linear-gradient(

        120deg,

        rgba(255,255,255,.65),

        transparent 42%

    );



    opacity:


    .35;



}



/* =====================================================
   Floating Buttons

   Surface 3

   Soft Glass

===================================================== */


#rightside button {


    color:


    #1d1d1f

    !important;



    background:


    var(--lg-surface-3-light)

    !important;



    border:


    1px solid

    rgba(0,0,0,.08)

    !important;



    border-radius:


    var(--lg-radius-md);



    backdrop-filter:


    blur(

        var(--lg-blur-light)

    )

    saturate(160%);



    -webkit-backdrop-filter:


    blur(

        var(--lg-blur-light)

    )

    saturate(160%);



    box-shadow:


    0

    12px

    35px

    rgba(0,0,0,.12);



    transition:


    transform .25s ease,

    box-shadow .25s ease;



}





#rightside button:hover {


    transform:


    translateY(-3px);



    box-shadow:


    0

    18px

    45px

    rgba(0,0,0,.18);



}





/* =====================================================
   Dark Mode

===================================================== */


/*
 Dark Article Card

 Soft Material

 No Edge Glow

*/


[data-theme="dark"]

#recent-posts .recent-post-item {


    background:


    var(--lg-surface-1-dark)

    !important;



    border-color:


    rgba(255,255,255,.12);



    box-shadow:


    0

    25px

    80px

    rgba(0,0,0,.55);



}





[data-theme="dark"]

#recent-posts .recent-post-item::before {


    background:


    linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 45%

    );



    opacity:


    .25;



}





[data-theme="dark"]

#recent-posts .recent-post-item::after {


    background:


    radial-gradient(

        circle at top left,

        rgba(255,255,255,.05),

        transparent 45%

    );



    opacity:


    .18;



}





/* =====================================================
   Dark Sidebar

===================================================== */


[data-theme="dark"]

#aside-content .card-widget {


    background:


    var(--lg-surface-2-dark)

    !important;



    border-color:


    var(--lg-border-dark);



}





[data-theme="dark"]

#aside-content .card-widget::before {


    background:


    linear-gradient(

        120deg,

        rgba(255,255,255,.12),

        transparent 45%

    );



}





/* =====================================================
   Dark Buttons

===================================================== */


[data-theme="dark"]

#rightside button {


    color:


    rgba(255,255,255,.92)

    !important;



    background:


    var(--lg-surface-3-dark)

    !important;



    border-color:


    rgba(255,255,255,.12)

    !important;



    box-shadow:


    0

    12px

    40px

    rgba(0,0,0,.45);



}





[data-theme="dark"]

#rightside button:hover {


    box-shadow:


    0

    20px

    55px

    rgba(0,0,0,.6);



}