.hero{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .hero-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .hero-title{text-transform: uppercase;width:100%;margin-top:50px;font-family:"Julius Sans One";font-size:clamp(28px,3.3vw,44px);font-weight:700;line-height:1.2;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .hero-intro{padding:0 10px;margin-top:20px;font-size:var(--font-size-5);font-weight:300;line-height:1.3;color:#d9f7ff} .hero-footer{ width:100%;height:auto;position:relative;margin-top:-30px;user-select:none;pointer-events:none;} .hero-footer img{width:100%;z-index:1;user-select:none;pointer-events:none;} @media (min-width :768px){ .hero-title{margin-top:80px;font-size:clamp(32px,4.5vw,44px);line-height:1.1;} .hero-intro{padding:0 50px;line-height:1.5;} } @media (min-width :992px){ .hero-intro{padding:0 80px;} } .collection{width:100%;display:grid;grid-template-columns:repeat(1, 1fr);gap:var(--gap);} @media (min-width:768px){ .collection{grid-template-columns:repeat(2, 1fr);} } @media (min-width:992px){ .collection{grid-template-columns:repeat(3, 1fr);} } .collection .article-item{width:100%;height:auto;overflow:hidden;border-radius:5px;border:1px solid #DDD;background:#fff;box-shadow:var(--shadow-main);} .collection .article-item img{width:100%;height:auto;overflow:hidden;transition:transform 1s ease;} .collection .article-item:hover img{transform:scale(1.1);} .collection .article-item .item-title{width:100%;height:auto;min-height:0;font-size:var(--font-size-4);font-weight:400;line-height:1.5;overflow:hidden;padding:15px 15px 10px;} .collection .article-item .item-info{width:100%;height:20px;line-height:1.5;padding-left: 15px;margin: 0 0 5px;color:#666;} .collection .article-item .item-info span{color: #999;margin-right: 5px;} .collection .article-item .item-info:last-child{ margin-bottom: 15px;} .hero-title{font-size:var(--font-size-8)} .detail{width:100%;overflow:hidden;box-shadow:var(--shadow-main);border-radius:10px;background-color:#fff} .detail-title{width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 var(--gap)} .detail-title h1{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);line-height:1.2;padding:20px 0;margin-bottom:0} .detail-favorite{margin-right:10px} .detail-favorite a .iconfont{font-size:var(--font-size-5)} .detail-author{width:100%;padding:15px var(--gap) 0} .detail-topic{margin-right:10px} .detail-content{width:100%;height:auto;padding:15px var(--gap) var(--gap);overflow:hidden;position:relative;font-size:var(--font-size-3)} .detail-left{float:left;width:100%;height:auto;overflow:hidden;margin-bottom:var(--gap)} .detail-left .detail-image img{width:100%;height:auto;border-radius:5px} .detail-menu{width:100%;height:auto;overflow:hidden;background:#f1f2f3;color:#555;margin-top:20px;padding:10px 15px;border-radius:5px;position:relative;border:1px solid #ddd} .detail-menu .menu-title{width:100%;height:auto;cursor:pointer;font-size:var(--font-size-6);color:var(--color-main)} .detail-menu .menu-title i{position:absolute;top:0;right:15px;font-size:var(--font-size-8);transition:transform .3s ease} .detail-menu .menu-list{text-transform:capitalize;counter-reset:item;font-size:var(--font-size-3);margin:0;padding:0} .detail-menu .menu-list>li{margin-top:15px;margin-left:15px;padding-left:15px;position:relative} .detail-menu .menu-list>li:before{content:counters(item, ".") ". ";counter-increment:item;position:absolute;left:-10px} .detail-menu .menu-list li ol{margin-top:5px;padding-left:30px;counter-reset:item} .detail-menu .menu-list li ol li{position:relative;padding-left:10px} .detail-menu .menu-list li ol li:before{content:counters(item, ".") ". ";counter-increment:item;position:absolute;left:-28px} .author-profile{width:100%;height:auto;overflow:hidden;margin-top:20px;border-radius:5px;background:#f1f2f3;padding:0 20px 20px 20px;position:relative} .author-profile .author-title{padding:10px 0 20px 0;width:100%;height:auto;cursor:pointer;font-size:var(--font-size-6);color:var(--color-main)} .author-info{width:100%;height:auto;overflow:hidden} .author-profile .author-label{font-size:var(--font-size-5);color:var(--color-main);margin-bottom:1rem} .author-profile .author-sublabel{font-size:var(--font-size-4);margin-left:.5rem;color:var(--color-main);margin-bottom:1rem} .info-left{float:left;width:100px;height:100px;overflow:hidden;position:relative;border-radius:50%} .author-avatar{width:100%;height:auto;overflow:hidden} .author-badge{position:absolute;bottom:0;left:0;width:100%;height:25px;line-height:25px;color:#fff;background:rgba(15,15,15,.75);font-size:var(--font-size-3);text-align:center} .info-right{float:right;width:calc(100% - 115px);height:100px;overflow:hidden;position:relative} .author-name{width:100%;height:30px;line-height:30px;text-align:center;font-size:var(--font-size-6);color:#5a1cb9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .author-review{margin:10px 0 0;text-align:center} .review-star{width:120px;height:24px;background:url(../upload/theme/icon-star-default.svg) repeat-x 0 0;background-size:24px;text-align:left;margin:0 auto;display:inline-block} .review-star .star-item{display:inline-block;height:24px;background:url(../upload/theme/icon-star-yellow.svg) repeat-x 0 0;background-size:24px} .review-intro{text-align:center} .author-description{width:100%;height:auto;margin:20px 0} .reader ul li{margin-bottom:10px} .author-expertise,.author-feature{list-style-type:disc} .other-topic{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px} .other-topic a{white-space:nowrap;flex-grow:1;flex-shrink:0;padding:5px 20px;font-size:var(--font-size-3);color:#333;background:#fff;border:1px solid #ddd;border-radius:20px;text-decoration:none;transition:all .2s ease} .other-topic a:hover{color:#fff;background:var(--color-button);border-color:var(--color-button)} .detail-right{float:left;width:100%;height:auto;overflow:hidden;padding-left:0} .detail-right .detail-image{width:100%;height:auto;border-radius:5px} .detail-right h2{width:100%;line-height:1.2;font-size:var(--font-size-7);margin:20px 0 20px 0;color:var(--color-main)} .detail-right h2:first-child{margin-top:0} .detail-right h3{width:100%;line-height:1.2;font-size:var(--font-size-6);margin:15px 0 15px 0;color:var(--color-main)} .detail-right h4{width:100%;line-height:1.2;font-size:var(--font-size-5);margin:10px 0 10px 0;color:var(--color-main)} .detail-right h4::before{content:"•";padding-right:5px} .detail-signoff{margin:2rem 0;padding:.8rem 1rem;border:1px solid #eee;border-radius:5px;background:#f1f2f3;font-size:var(--font-size-3);font-style: italic;color:#777;line-height:1.6;} .detail-signoff .more{text-align:center} .article-votes{width:100%;margin-top:16px} .vote-title{font-size:var(--font-size-6);color:var(--color-main);margin-bottom:8px} .vote-list{width:100%;height:auto;display:flex;flex-wrap:wrap} .vote-list .vote-item{display:inline-block;border:1px solid rgba(150,50,255,.3);background:rgba(90,50,180,.1);color:#333;border-radius:3px;padding:10px;margin:0 10px 10px 0;line-height:1.2;white-space:nowrap;flex:1 1 auto;min-width:fit-content;cursor:pointer;transition:background-color .3s ease,color .3s ease} .vote-list .vote-item{display:flex;justify-content:space-between;align-items:center} .article-tags{width:100%;margin-top:16px} .tag-title{font-size:var(--font-size-6);color:var(--color-main);margin-bottom:8px} .tag-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px} .tag-list .tag-item{background:#f1f2f3;border:1px solid #ddd;color:#555;border-radius:4px;padding:10px 15px;line-height:1;white-space:nowrap;flex-grow:1;flex-shrink:0} .tag-list .tag-item.hover,.tag-list .tag-item:hover{background:#5a32ff;color:#fff} .related-articles{width:100%;height:auto;overflow:hidden;background:#fff;box-shadow:var(--shadow-main);border-radius:10px;padding:var(--gap);margin-top:var(--gap)} .related-articles .related-title{font-size:var(--font-size-6);color:var(--color-main);margin-bottom:10px;margin-top:-3px} @media (min-width :992px){.detail-left{width:30%} .detail-right{float:right;width:70%;padding-left:30px} .detail-menu{border:none} .detail-menu .menu-title i{right:20px} .related-articles .related-title{margin-top:-10px;margin-bottom:15px} }