/*
Theme Name: Bomi
Theme URI: www.bomi.design
Author: Bomi
Author URI: www.bomi.design
Description: 个人网站
Version: V3.0.0
License: 个人站第三版
Tags: 生命短暂犹若露珠消散
*/

/**网页文本选中背景色设置**/
::-moz-selection
    {
        background: rgba(0,0,0,.3);
        color: #000000;
        text-shadow: none;
    }
::selection
    {
        background: rgba(0,0,0,.3);
        color: #000000;
        text-shadow: none;
    }
/**网页文本选中背景色设置**/

/**导航样式**/
.navbar
    {
        padding: 2rem 4.9rem 2rem 3rem !important;
        background: rgba(255,255,255,.8) !important;
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid #ffffff;
    }

.navbar::after
    {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        bottom: -1px;
        left: 0;
        height: 1px;
        background:rgba(235,235,235,1);
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

.navbar-light .navbar-nav .nav-link
    {
        color: rgba(0,0,0,.9) !important;
        transition: color .25s ease;
    }

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover
    {
        color: rgba(0,0,0,.5) !important;
        transition: color .25s ease;
    }

.navbar-toggler-icon
    {
        display: inline-block;
        width: 1.2em !important;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
    }

.nav-item
    {
        margin: 0rem 1rem;
    }

.navbar-nav
    {
        margin: 0 auto;
        font-size: 0.875rem;    /**设置导航字号**/
    }

/* nav .current-menu-item a:hover::before,nav .current-menu-parent a:hover::before
    {
        transform: scaleX(1);
        opacity: 1;
    } */

nav .current-menu-item a,nav .current-menu-parent a
    {
        position: relative;
    }

nav .current-menu-item a::before,nav .current-menu-parent a::before     /**设置导航选中样式**/
    {
        content: '';
        width: 1.8rem;
        height: 8px;
        color: rgba(0,0,0,.9) !important;
        background: rgba(0,153,255,.3);
        position: absolute;
        top: 55%;
    }

@media (max-width: 991.98px)
    {
        .navbar
            {
                padding: 1rem 1rem !important;
            }
        .navbar-toggler
            {
                padding-right: 0rem !important;
            }
        .nav-item
            {
                text-align: center;
            }
    }

.navbar-light .navbar-toggler
    {
        border-color: rgba(255,255,255,0);
    }

.navbar-toggler:focus
    {
        outline: none;
    }

.navbar-brand
    {
        padding: 0;
        margin: 0;
        font-size: 0;
    }

#theme-toggler
    {
        width: 24px;
        height: 24px;
        background-image: url(images/sun-fill.svg);
        position: absolute;
        right: 48px;
        cursor: pointer;
    }
    
@media (max-width: 991.98px)
    {
        #theme-toggler
            {
                display: none;
            }
    }
/**导航样式**/

/**修改bootstrap主样式**/
.col-lg-3,.col-md-6,.col-xl-3,.col-sm-6
    {
        padding: 1rem 0.5rem 0;
    }

body
    {
        line-height: 1.6 !important;
        color: #333333;
        background: #F1F3F6;
        font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif !important;
    }

@media (min-width: 1200px)
    {
        .container
            {
                max-width: 1366px;
                margin-top: 6.5rem;
            }
    }
    
@media (max-width: 991.98px)
    {
        .container
            {
                margin-top: 4.6rem;
            }
    }

    
.card-img-top
    {
        width: 100%;
        border-radius: 1rem !important;
        /*border-top-left-radius: calc(.25rem - 1px);*/
        /*border-top-right-radius: calc(.25rem - 1px);*/
    }
/**修改bootstrap主样式**/

/**top-banner卡片样式**/
.top-banner
    {
        border: 2px solid #fff;
        transition: box-shadow .25s ease,transform .25s ease;
        /*box-shadow: 0 0.2rem 0.5rem rgb(22 28 45 / 3%), 0 0.2rem 0.5rem -0.2rem rgb(22 28 45 / 3%) !important;*/
        overflow: hidden;
        border-radius: 1rem !important;
        background-image: linear-gradient(90deg,#fff,#F1F4F9);
        
    }
/**top-banner卡片样式**/

/**自定义卡片样式**/
.card
    {
        border: 2px solid #fff;
        transition: box-shadow .25s ease,transform .25s ease;
        /*box-shadow: 0 0.2rem 0.5rem rgb(22 28 45 / 3%), 0 0.2rem 0.5rem -0.2rem rgb(22 28 45 / 3%) !important;*/
        overflow: hidden;
        border-radius: 1rem !important;
        background-image: linear-gradient(90deg,#fff,#F1F4F9);
        
    }

.card-img-top
    {
        height: auto;
    }

.card:hover
    {
        cursor: pointer;
        box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1) !important;
        transform: translate3d(0,-3px,0);
    }

.card-body
    {
        padding: 0.8rem;
    }

.card-img-top
    {
        transition: opacity .25s ease;
    }

.card:hover .card-img-top
    {
        opacity: .9;
    }

.card-title
    {
        margin-bottom: 0rem;
        font-size: 1rem;
        color: rgba(0,0,0,.9) !important;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
.card-tag
    {
        margin-bottom: 0.5rem;
    } 

.card-info
    {
        margin-bottom: 0rem;
    }    

.card-info .visit::before
    {
        content: "";
        background: url(images/visit-icon.svg) 0 0 no-repeat;
        background-size: 12px auto;
        display: inline-block;
        width: 12px;
        height: 12px;
        position: relative;
        top: 1px;
        margin-right: 0.15rem;
    }

.card-info,.card-tag a
    {
        color: rgba(0,0,0,.5) !important;
        font-size: 0.75rem;
    }
/**自定义卡片样式**/

/**footer样式**/
footer
    {
        margin-top: 8rem;
    }

footer::before
    {
        content: "";
        display: block;
        width: 100%;
        position: relative;
        top: 0;
        /* left: 40%; */
        /* margin-left: -40%; */
        height: 1px;
        background: -o-radial-gradient(center, ellipse, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
        background: radial-gradient(ellipse at center, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
    }

.copyright,.contact
    {
        padding: 6rem 0rem;
        margin: 0rem;
        color: rgba(0,0,0,.5);
    }

.copyright .copyright-detail,.copyright-record
    {
        font-style: normal;
        color: rgba(0,0,0,.5) !important;
    }

.copyright .copyright-record a
    {
        color: rgba(0,0,0,.5);
    }

.copyright .copyright-record a:hover
    {
        cursor: pointer;
        color: rgba(0,0,0,.9);
    }

.contact li
    {
        width: 32px;
        height: 32px;
        transition: color .25s ease;
        color: rgba(0,0,0,.5);
    }

.contact li:hover
    {
        cursor: pointer;
        color: rgba(0,0,0,.9);
    }
    
li.WeChat
    {
        position: relative; /* 关键！让QR‑code相对于这个li定位 */
    }

li.WeChat img
    {
        display: block; /* 彻底干掉图片底部基线缝隙 */
    }

.QR-code
    {
        position: absolute;
        /* top/left 按你业务调整，弹出二维码位置 */
    }

li.WeChat
    {
        position: relative; /* 必须！伪元素绝对定位的参照物 */
        /* 给阴影留出一点空间，不要贴死图标 */
        padding: 6px;
    }

/* 伪元素实现自定义阴影素材，放在图片底层 */
li.WeChat::after
    {
        content: "";
        position: absolute;
        z-index: 1;
        /* 水平居中，宽度和图标一样64px */
        width: 130px;
        height: 130px; /* 根据你的倒影svg实际高度设置 */
        left: 50%;
        transform: translateX(-50%);
        top: 16px; /* 等于图片高度，紧贴图片底部 */
        background-image: url("/wp-content/themes/wp-bomi/images/wechat-shadow.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
    }

li.WeChat img
    {
        display: block;
        position: relative;
        z-index: 1; /* 保证微信图标在伪阴影上面 */
    }


.WeChat img:hover + .QR-code
    {
        display: block;
    }

.QR-code
    {
        width: 210px;
        height: 226px;
        background: url("images/WeChat.png");
        background-size: 100%;
        position: absolute;
        right: -81px;
        bottom: 48px;
        display: none;
    }

@media (max-width: 991.98px)
{
    .copyright,.contact
        {
            padding: 2rem 0rem 2rem;
        }
}

.copyright
    {
        font-size: 0.875rem;
    }

.contact
    {
        font-size: 1.4rem;
    }

.copyright p
    {
        margin-bottom: 0rem;
    }

.contact ul,.copyright ul
    {
        list-style: none;
        padding: 0rem;
        margin: 0rem;
    }

@font-face
{
    font-family: "bomi";
    src: url(fonts/bomi.svg);
    src: url(fonts/bomi.eot);
    src: url(fonts/bomi.ttf);
    src: url(fonts/bomi.woff);

}

.contact
    {
        font-family: "bomi";
    }

.contact li
    {
        padding: 0rem 1.5rem;
        position: relative;
    }
/**footer样式**/

/**文章详情页样式**/
article h2,h4,p,li
    {
        color: #333333;
    }
    
article h2
    {
        font-size: 2.5rem;
        padding: 5rem 0rem 0rem 0rem;
        margin-bottom: 4rem;
    }

article h4
    {
        margin: 4rem 0rem 1rem 0rem !important;
    }

blockquote
    {
        background: rgba(0,0,0,.05);
    }

blockquote p
    {
        border-left: 4px solid rgba(0,0,0,.05);
        padding: 1rem;
        margin-bottom: 4rem;
        font-size: 0.875rem;
    }
    
.articlequote blockquote
    {
        background: none !important;
    }
    
.explanation
    {
        color: rgba(0,0,0,.5);
    }

/* article p
    {
        max-width: 800px;
        margin: 0rem auto;
        line-height: 2;
        text-align: justify;
    } */

@media (max-width: 991.98px)
    {
        article p
            {
                line-height: 1.5;
            }
    }

article ul
    {
        list-style: none;
        margin-bottom: 4rem !important;
    }

article ul::after
    {
        content: "";
        display: block;
        width: 100%;
        position: relative;
        bottom: -2rem;
        /* left: 40%; */
        /* margin-left: -40%; */
        height: 1px;
        background: -o-radial-gradient(center, ellipse, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
        background: radial-gradient(ellipse at center, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
    }

.date,.tag a
    {
        color: rgba(0,0,0,.5) !important;
    }

figure
    {
        margin: 0 !important;
    }

figure img
    {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

.life-icon      /**生活图标页面中渐变变景色样式**/
    {
        background: linear-gradient(-90deg,#4076fe 0%,#48bcf5 100%);
    }    
/**文章详情页样式**/

/**a标签下划线去除**/
a:hover,a:active,a:link,a:visited
    {
        text-decoration: none;
    }
/**a标签下划线去除**/

/**主内容区域最小高度设置**/
/* #main
    {
        min-height: 1200px;
    } */
/**主内容区域最小高度设置**/

/**分页样式**/
.wrap-pagination
    {
        width: 100%;
        margin: 2rem 0 0 0;
        display: flex;
        justify-content: center;
    }

.wrap-pagination a
    {
        display: block;
        width: 2.125rem;
        height: 2.125rem;
        line-height: 2.125rem;
        text-align: center;
        margin:0 .5rem 0 .5rem;
        border-radius: .5rem;
        background: rgba(0,0,0,.06);
        text-decoration:none;
        color:#333;
    }

.wrap-pagination a.current
    {
        color: #ffffff !important;    
        background: #0099ff; 
        /*box-shadow: 0px 5px 18px -4px rgba(0, 153, 255, .8);*/
        transition: all .25s ease;
    }

.wrap-pagination a:hover
    {
        background: #0099ff;
        color: #ffffff;
        transition: all .25s ease;
    }
/**分页样式**/

/**关于页面样式**/
#about-banner
    {
        width: 100%;
        background: #f8f8f8;
        margin-bottom: 4rem;
    }

#about-banner img
    {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

.about::after
    {
        content: "";
        display: block;
        width: 100%;
        position: relative;
        bottom: -2rem;
        /* left: 40%; */
        /* margin-left: -40%; */
        height: 0px;
        background: -o-radial-gradient(center, ellipse, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
        background: radial-gradient(ellipse at center, rgba(0,0,0,.08) 0, rgba(255, 255, 255, 0) 95%);
    }

.about li
    {
        text-align: center;
    }

.extract-start
    {
        position: relative;
    }

.extract-start::before
    {
        content: "\201C";
        position: absolute;
        display: block;
        top: 4px;
        left: 560px;
        width: 32px;
        height: 32px;
        font-size: 80px;
        line-height: 32px;
        color: rgba(0,0,0,.3);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
        'Segoe UI Emoji', 'Segoe UI Symbol' !important;
        text-align: center;
        z-index: 1;
    }

.extract-end
    {
        position: relative;
    }

.extract-end::after
    {
        content: "\201D";
        position: absolute;
        display: block;
        top: 18px;
        left: 746px;
        width: 32px;
        height: 32px;
        font-size: 80px;
        line-height: 32px;
        color: rgba(0,0,0,.3);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
        'Segoe UI Emoji', 'Segoe UI Symbol' !important;
        text-align: center;
        z-index: 1;
    }

@media (max-width: 1365px)
    {
        .extract-end::after,.extract-start::before
            {
                display: none;
            }
    }
/**关于页面样式**/