/*   
Theme Name: HaiGe主题
Theme URI:https://haigege.com
Description:HaiGeGe主题。 <br /> 官网：<a href="https://haigege.com">海哥哥</a>
Template: lll
Version: 1.6.8
LastEditors: HaiGeGe
LastEditTime: 2026-03-13 09:05:36
FilePath: style.css
Description: 自定义样式
*/
:root {
    --body-bg-color: #EFF7F1;
    --muted-color: #8B959E;
    --main-color: #1f2f3f;
    --cloud-c1: #13c168;
    --cloud-c2: #fbfcf3;

}
/*暗主题调色*/
.io-black-mode {
    --main-color: #ddd;
    --main-bg-color: #172b3d;
    --main-radius-bg: #43464a;
    --body-bg-color: #0b2135;
    --main-blur-bg-color: #2A4055;
    --main-blur-bg-color2: rgba(46,46,46,0.75);
    --main-blur-bg-color3: rgba(46,46,46,0.5);
    --muted-color: #73757a;
    --muted-color2: #a6a8ab;
    --muted-color3: #5f6164;
    --muted-bg-color: #24262a;
    --muted-bg-color-l: #1b1c1e;
    --muted-blur-bg-color: rgba(55,55,55,0.6);
    --card1-bg: #253D52;
    --input-bg-color: var(--body-bg-color);
}
.io-black-mode .blur-bg {
background:var(--main-blur-bg-color) !important;
}
.io-black-mode .app-item {
  box-shadow: inset 0 0 15px 15px var(--muted-shadow), 0 0 0 0 var(--main-shadow);
    }
.io-black-mode .posts-item {
    background-color: var(--card1-bg);
    box-shadow: inset 0 0 15px 15px rgb(116 116 116 / 0%), 0 0 0 0 var(--main-shadow);
}
.io-black-mode .posts-item:hover {
    box-shadow: 0 20px 25px 5px rgb(0 0 0 / 35%);
}
.io-black-mode .form-control {
    background: #112233;
}
.io-black-mode .btn-tools {
	color:#a6a8ab;
	background: rgb(88 88 88 / 60%);
}
.io-black-mode .search-body .dropdown+.form-control {
    padding-left: 100px;
    background: #080808;
}
.io-black-mode .nav-min {
	background-image: linear-gradient(90deg, #0a7f43 0%, #00683f 100%);
}
.io-black-mode .nav-min a {color: #c8c8c8;}
.btn-tools {
    background: rgb(215 215 215 / 90%);
}
/* 公告条-系统分类-无评论色条冲突
.io-black-mode .text-muted {
    background-color: #1f3345;
    border-radius: 20px;
}
*/
.show-card .content-card {
    background: #ffffff00;
}

body {
color: var(--main-color);
background-color: var(--body-bg-color);
position: relative;
}

/*页头*/
.header-nav {
        display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;

    pointer-events: auto;

    border-radius: 1.75rem;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
.header-fixed {
    padding: 0px;
height:auto;/*taigaole*/

}
.blur-bg {
max-width: 66rem;
background: rgb(255 255 255) !important;
box-shadow: 0 .125rem .5rem 0 rgba(0,0,0,0.03), 0 .125rem 0 -.5rem rgba(23,43,61,0.2);
}
.header-banner.header-calculate {
    padding-bottom:20px;
}
.content .panel-header .mb-3{
    font-size: 1.375rem;
}
.taxonomy-head .taxonomy-head-img.bg-blur::after {
background: #29f5ff;
}
.taxonomy-title  .h3 {
        font-size: 2rem;
}
@media (min-width: 768px) {
.blur-bg {
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.25rem;
    height:4rem;
}
.content .panel-header .mb-3{
    font-size: 1.625rem;
}
}
.big-search .h1{
font-size:2rem;
	font-weight:600;
	margin: 0rem auto;
	/*max-width:20rem;*/
    color: #0098f8 !important;
    }
.search-body .dropdown+.form-control {
    padding-left: 100px;
    background: #dcf6ff;
}
.header-big.css-img, .header-big.css-bing {
    background-color: #eff7f100;
	margin-top: calc(10px - var(--main-nav-hight));
}

.header-big.css-img::before, .header-big.css-bing::before {
    background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 0%) 100%), radial-gradient(rgba(0, 0, 0, 0) 100%, rgb(0 0 0 / 0%) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 0% 100%, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 0%) 100%);
}
.module-id-1 .content-wrap{
    margin-top: -2em;
	}
.module-id-1 .style-app-default{
   padding-bottom:.5em;
   padding-top:.5em;
	}
.mobile-nav>.menu-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin:-.25rem;
    background: var(--theme-color-rgb);
}
.mobile-nav>.menu-nav li {
    max-width: 50%;
    flex: 0 0 50%;
    width: 100%;
    padding: .25rem;
    font-weight: bold;
}
.mobile-nav>.menu-nav a {
	display: block;
	background-color: rgb(110 202 255 / 20%);
	border-radius: var(--theme-border-radius);
	padding:1.2rem;
	font-weight: 500;
    text-align: center;
}
.navbar-header-menu .icon-fw{
    min-width: 1.8rem;
    max-width: 1.8rem;
    height: 1.8rem;
    color: #ffffff;
    padding: .33rem;
    font-size: 1.125rem;
    transition: transform .2s ease;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #41a5ff 0%, #00b0ff 100%);
    box-shadow: 0 .25rem .5rem 0 rgb(69 129 195 / 30%);
}
.tab-title .iconfont{
    color: #45c368eb;
}
.mobile-nav .icon-fw{
    min-width: 1.3rem;
    max-width: 1.3rem;
    height: 1.3rem;
    color: #ffffff;
    padding: .2rem;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #41a5ff 0%, #00b0ff 100%);
}
.navbar-header-menu a:hover .icon-fw{
        transform: scale(0.9);
}
.header-nav .navbar-header>li::after {
     background:#40bd6300; 
}
/*分类+卡片*/
.app-item .vc-j-purple{
    position: absolute;
	width: 2rem;
	--this-color: #ff3f3f;
    --this-bg: linear-gradient(135deg, #ffffff00 10%, #ffffff00 100%);
	font-size:.8em;
    top: 3px;
    right: -5px;
}
.app-item:hover .vc-j-purple {
    opacity: 0
}
.sites-item .vc-j-purple{
    position: absolute;
	width: 2rem;
	--this-color: #ff3f3f;
    --this-bg: linear-gradient(135deg, #ffffff00 10%, #ffffff00 100%);
	font-size:.8em;
    top:2px;
   right: -6px;
}
.sites-item:hover .vc-j-purple {
    opacity: 0
}
.post-item .vc-j-purple{
    position: absolute;
	--this-color: #ff3f3f;
    --this-bg: linear-gradient(135deg, #ffffff00 10%, #ffffff00 100%);
    font-size:.7em;
    top: 3px;
    right:2px;
}

.app-platform .iconfont{
    font-size: 1.1rem !important;
    margin: 5px;
}
@media (min-width:768px) {
.app-item .vc-j-purple{
	font-size:1.1em;
	    top: 0;
    right: -5px;
}
.sites-item .vc-j-purple{
	font-size:1.1em;
	    top: 0;
   right: -5px;
}
.post-item .vc-j-purple{
    font-size:1em;
	    top: 2px;
    right:0;
}
.app-meta .meta-ico .d-none{
    display: none !important;
}
.sites-item .meta-ico .d-none{
    display: none !important;
}
.ml-auto .meta-like{
    display: none !important;
}
}
.app-item.style-app-max .item-header {
    margin-top: 25px;
    margin-bottom: 25px;
}
.taxonomy-title .taxonomy-head-count{
display:none;
}
.ioui-main .align-items-center.mb-2{
    padding: 0.75rem 0.5rem;
}
.content-card .tab-title {
    font-size: 1.4rem !important;
    font-weight: 600;
}
.content-card .btn-more{
    font-size: 1.05rem !important;
	font-weight: 600;
}

@media (max-width: 768px) {
.big-search .h1{font-size:1.75rem;}
.ioui-main .align-items-center.mb-2{
    padding: 0.3rem 0.5rem;
}
.content-card .tab-title{
    font-size:1.125rem !important;
    font-weight: 600;
}
.content-card .btn-more{
    font-size: 0.88rem !important;
	font-weight: 600;
}
}
.posts-item .item-media {
    box-shadow: 0 2.5rem 3rem 15px rgb(0 0 0 / 8%), 0 .125rem 2rem -.5rem rgb(20 50 60 / 20%);
}
.posts-item.post-item:hover .item-media img {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}
.posts-item.app-item .item-title {
    font-size: 15px;
}
.posts-item.sites-item .item-title {
    font-size: 15px;
}
.posts-item.style-post-card2 .item-title, .posts-item.style-post-card .item-title {
    font-size: 15px;
}
.posts-item.app-item .item-media {
    transition: transform .2s ease 0s
}
.posts-item.style-app-max .item-media {
    width: 90px;border-radius: 15%;
}
.show-card .posts-item {
    box-shadow: inset 0 0 2px 0 var(--muted-shadow), 0 0 0 0 var(--main-shadow);
}
.posts-item:hover {
    box-shadow: inset 0 0 2px 0 var(--muted-shadow),0 20px 25px -10px var(--main-shadow)
}
@media (min-width: 992px) {
.posts-item.style-app-max .item-media {
    width:100px;border-radius: 20%;
}
}
/*面包屑*/
.speed-bar { width: 100%; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) {
  .speed-bar {max-width: 66rem;}
  .speed-bar {padding-left: 2rem;padding-right: 2rem;}
}

.speed-bar { max-width: 66rem; padding-left: 0; padding-right: 0; }
@media (max-width: 991px) {
	.speed-bar { padding: 0 !important; }
}
.nav-min {
	background-color: #0f80f8; z-index: 1; position: relative;
	background-image: linear-gradient(90deg, #0f80f8 0%, #0668dc 100%);
	box-shadow: 0 .25rem 1.5rem 0 rgba(0,0,0,0.15); margin-top: -3.2rem; padding-top:1.2rem;
	padding-left: 1.5rem; padding-right: 1.5rem; font-weight: bold; color: rgba(255,255,255,.5); font-size: .8rem;
	border-bottom-left-radius: 1.75rem; border-bottom-right-radius: 1.75rem;
}
.nav-min > span { color: #eee;line-height: 1.25rem; padding: .375rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-min a { color: #fff; }
.nav-min a:hover { color: rgba(255,255,255,.8); }
.nav-min .text-color {
    color: #ddd;
}
@media (min-width: 768px) {
.nav-min {
float: none;
max-width: calc(100% - 55%);
padding-left: 1.5rem;
padding-right: 1rem;
padding-top: 1.8rem;
border-bottom-left-radius: 2.25rem;
border-bottom-right-radius: 1.125rem;
}
}
@media (min-width: 640px) {margin-top: -2.5rem;
.nav-min {max-width: 66rem;padding-left: 2rem;padding-right: 1rem;padding-top: 0.5rem;}
}
.content-wrap .card-body {padding:2rem;}
.card-body .h3 {color: #0f80f8;;}
/*软件-网站截图*/
.screenshot-text{
position: absolute;
font-size:14px;
padding:5px 0 0 10px;
}
.screenshot-carousel .img_wrapper {
    height: 300px;
}
@media (min-width: 768px) {
.row .col-xl-5 {
    max-width: 35%;
}
.screenshot-carousel .img_wrapper {
    height: 360px;
}
}
.screenshot-carousel {
    background-color: rgb(10 20 30 / 15%);
    box-shadow: 0 0 50px 0 #3e6a7e61 inset;
}
.sites-preview .preview-body {
    background-color: rgb(10 20 30 / 15%);
}
/*网站-软件应用页面*/
.site-body .mb-4{
    margin-bottom: 1rem !important;
}
.row.mx-xxxl-n5 {
    padding-bottom: 1rem !important;
}
.content-wrap .title1{
    background: -webkit-linear-gradient(91deg, transparent, #0f80f8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    font-weight: 800;
	margin-top: 1rem !important;
    margin-left: 1rem !important;
    margin-bottom: 0rem !important;
}
/*标签云-更多*/
.io-widget-tag-cloud .card-body{
   padding: 1rem 3.5rem 1rem 3.5rem;
}
.ajax-more{
margin-bottom: 1rem !important;
}
/*刷新标签-幻灯bg黑*/
.module-header .text-md {
	padding: 0.3rem 0rem 0.3rem 1rem;
    font-size: 1.4rem !important;
	font-weight: 600;
}
.ajax-auto-post {
    position: absolute;
    top: 0.55rem;
    right: 1.5rem;
	font-size:1.4rem;
}
.media-title-bg:before {
    height: 60px;
}
@media (max-width: 768px) {
.io-widget-tag-cloud .card-body{
   padding: 1rem 1.5rem 1rem 1.5rem;
}
.module-header .text-md {
	padding: 0.3rem 0rem 0.2rem 0.85rem;
    font-size:1.125rem !important;
	font-weight: 600;
}
.ajax-auto-post {
    top: 0.25rem;
    right: 1rem;
	font-size:1.1rem;
}
.swiper-slide .d-none {
    display: block !important;
}
}
/*页脚*/
.container-body:not(.full-container) .container-footer{
    max-width: calc(var(--main-max-width) - 20px);
}
footer {
    padding:0 10px;
}
.footer {
    padding:0 35px ;
    border-radius: 60px 60px 0 0;
    padding-top: 2rem !important;
}
.main-footer {
    margin-top: 25px
}
.footer .text-sm,.text-md-right{
 display:none;
}
.footer .copyright{font-size:.875rem !important;
}
.footer .text-xs{font-size:.875rem !important;text-align:right;flex:auto;
}
.footer .col-md-5 {font-size:.875rem !important;padding: 1rem !important;
}
@media (max-width: 768px) {
.footer .text-xs{text-align:center;}
.footer .col-md-5 {font-size:.875rem !important;padding: 0rem !important;}
.footer .col-12 {margin-bottom: 0rem !important;}
}
.nothing-svg {max-width: 380px}
/* Background */
.background { pointer-events: none; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: -2; overflow: hidden; }
.background > i { position: absolute; z-index: -1; display: block; }
.bg-clouds { width: 100%; display: flex !important; justify-content: center; }
.cloud-c1 { fill: var(--cloud-c1); opacity: .1; }
.cloud-c2 { fill: var(--cloud-c2); }

.io-black-mode .cloud-c1 { opacity: 1; fill: #0f1f2e;}
.io-black-mode .cloud-c2 { fill: #142636;}

@media (min-width: 768px) {
	.bg-circle-yellow, .bg-circle-purple, .bg-circle-green { width: 75rem; height: 75rem; }
	.bg-circle-purple {
		background-image: radial-gradient(closest-side, rgba(155,84,232,0.2) 0, rgba(155,84,232,0) 100%);
	}
	.bg-circle-yellow {
		background-image: radial-gradient(closest-side, rgba(254,222,74,0.2) 0, rgba(254,222,74,0) 100%);
	}
	.bg-circle-green {
		background-image: radial-gradient(closest-side, rgba(76,203,112,0.2) 0, rgba(76,203,112,0) 100%);
	}
	.bg-style-1 .bg-circle-yellow.bgc-1 { top: 0; right: 50%; transform: translate(10%, -60%); }
	.bg-style-1 .bg-circle-yellow.bgc-2 { top: 50%; right: 50%; transform: translate(-5%, -50%); }
	.bg-style-1 .bg-circle-purple { top: 70%; left: 70%; transform: translate(0%, -50%); }
	.bg-style-1 .bg-circle-green { top: 5%; left: 75%; transform: translate(0%, 0%); }
	.bg-style-1 .bg-clouds svg, .bg-style-2 .bg-clouds svg { max-width: 2880px; min-width: 2880px; height: auto; }

	.bg-style-2 .bg-circle-purple { top: 75%; left: 50%; transform: translate(50%, -50%); }
	.bg-style-2 .bg-circle-yellow.bgc-1 { bottom: 0; left: 50%; transform: translate(10%, 50%); }
	.bg-style-2 .bg-circle-yellow.bgc-2 { top: 30%; right: 50%; transform: translate(-5%, -50%); }
	.bg-style-2 .bg-circle-green { top: 15%; left: 50%; transform: translate(60%, 0%); }
	.bg-style-2 .bg-clouds { bottom: 0; left: 0; }

	.io-black-mode .bg-style-1 .bg-circle-yellow,
	.io-black-mode .bg-style-1 .bg-circle-purple,
	.io-black-mode .bg-style-1 .bg-circle-green,
	.io-black-mode .bg-style-2 .bg-circle-yellow,
	.io-black-mode .bg-style-2 .bg-circle-purple,
	.io-black-mode .bg-style-2 .bg-circle-green { display: none !important; }
}
@media (max-width: 767px) {
	.bg-style-1 .bg-clouds svg, .bg-style-2 .bg-clouds svg { max-width: 2000px; min-width: 2000px; height: 570px; margin-left: 22rem; }
}
.background-fx {
    position: absolute;
    left: 60px;
    right: 0;
    height: 100vh;
    top: 0;
    overflow: hidden;
    opacity: 1;
    z-index: -1
}
.shape-01 {
    position: absolute;
    top: 11%;
    right: 42%;
    -webkit-animation: animationFramesTwo 13s linear infinite;
    animation: animationFramesTwo 13s linear infinite
}

.shape-02 {
    position: absolute;
    top: 27%;
    left: 17%;
    -webkit-animation: animationFramesFour 25s linear infinite alternate;
    animation: animationFramesFour 25s linear infinite alternate
}

.shape-03 {
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-animation: animationFramesThree 35s linear infinite alternate;
    animation: animationFramesThree 35s linear infinite alternate
}

.shape-04 {
    position: absolute;
    top: 40%;
    right: 23%;
    -webkit-animation: animationFramesFour 20s linear infinite alternate;
    animation: animationFramesFour 20s linear infinite alternate
}

.shape-05 {
    position: absolute;
    bottom: 62%;
    right: 28%;
    -webkit-animation: animationFramesOne 15s linear infinite;
    animation: animationFramesOne 15s linear infinite
}

.shape-06 {
    position: absolute;
    bottom: 73%;
    left: 38%;
    -webkit-animation: animationFramesFour 20s linear infinite alternate;
    animation: animationFramesFour 20s linear infinite alternate
}

.shape-07 {
    position: absolute;
    left: 14%;
    bottom: 54%;
    -webkit-animation: animationFramesOne 17s linear infinite;
    animation: animationFramesOne 17s linear infinite
}

.shape-08 {
    position: absolute;
    left: 14%;
    top: 60%;
    -webkit-animation: animationFramesOne 20s linear infinite alternate;
    animation: animationFramesOne 20s linear infinite alternate
}

.shape-09 {
    position: absolute;
    top: 22%;
    left: 41%;
    -webkit-animation: animationFramesOne 15s linear infinite;
    animation: animationFramesOne 15s linear infinite
}

@keyframes animationFramesOne {
    0% {
        transform: translate(0) rotate(0deg)
    }

    20% {
        transform: translate(73px,-1px) rotate(36deg)
    }

    40% {
        transform: translate(141px,72px) rotate(72deg)
    }

    60% {
        transform: translate(83px,122px) rotate(108deg)
    }

    80% {
        transform: translate(-40px,72px) rotate(144deg)
    }

    to {
        transform: translate(0) rotate(0deg)
    }
}

@-webkit-keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0) rotate(0deg)
    }

    20% {
        -webkit-transform: translate(73px,-1px) rotate(36deg)
    }

    40% {
        -webkit-transform: translate(141px,72px) rotate(72deg)
    }

    60% {
        -webkit-transform: translate(83px,122px) rotate(108deg)
    }

    80% {
        -webkit-transform: translate(-40px,72px) rotate(144deg)
    }

    to {
        -webkit-transform: translate(0) rotate(0deg)
    }
}

@keyframes animationFramesTwo {
    0% {
        transform: translate(0) rotate(0deg) scale(1)
    }

    20% {
        transform: translate(73px,-1px) rotate(36deg) scale(.9)
    }

    40% {
        transform: translate(141px,72px) rotate(72deg) scale(1)
    }

    60% {
        transform: translate(83px,122px) rotate(108deg) scale(1.2)
    }

    80% {
        transform: translate(-40px,72px) rotate(144deg) scale(1.1)
    }

    to {
        transform: translate(0) rotate(0deg) scale(1)
    }
}

@-webkit-keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0) rotate(0deg) scale(1)
    }

    20% {
        -webkit-transform: translate(73px,-1px) rotate(36deg) scale(.9)
    }

    40% {
        -webkit-transform: translate(141px,72px) rotate(72deg) scale(1)
    }

    60% {
        -webkit-transform: translate(83px,122px) rotate(108deg) scale(1.2)
    }

    80% {
        -webkit-transform: translate(-40px,72px) rotate(144deg) scale(1.1)
    }

    to {
        -webkit-transform: translate(0) rotate(0deg) scale(1)
    }
}

@keyframes animationFramesThree {
    0% {
        transform: translate(165px,-179px)
    }

    to {
        transform: translate(-346px,617px)
    }
}

@-webkit-keyframes animationFramesThree {
    0% {
        -webkit-transform: translate(165px,-179px)
    }

    to {
        -webkit-transform: translate(-346px,617px)
    }
}

@keyframes animationFramesFour {
    0% {
        transform: translate(-300px,151px) rotate(0deg)
    }

    to {
        transform: translate(251px,-200px) rotate(180deg)
    }
}

@-webkit-keyframes animationFramesFour {
    0% {
        -webkit-transform: translate(-300px,151px) rotate(0deg)
    }

    to {
        -webkit-transform: translate(251px,-200px) rotate(180deg)
    }
}

@-webkit-keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}


.search-form {
border-radius: var(--theme-border-radius);
box-shadow:0 0 6px rgb(206 206 206 / 60%);
}

.search-form:hover {
box-shadow:0 0 8px rgb(42 164 255 / 60%);
}