.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;} } .reader-title{color:var(--color-main);font-size:var(--font-size-8);margin-bottom: 15px;} .reader-info{width:100%;height:auto;overflow:hidden;} .reader-avatar{width:100px;height:100px;overflow:hidden;position:relative;border-radius:50%} .reader-image{width:100%;height:auto;overflow:hidden} .reader-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} .reader-name{width:100%;height:30px;line-height:30px;text-align:center;font-size:var(--font-size-9);color:#5a1cb9;} .reader-review { margin: 15px 0 0;display: flex;align-items: center;justify-content: 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;} .review-star .star-item { display: inline-block;height: 24px;text-align: center;background: url(../upload/theme/icon-star-yellow.svg) repeat-x 0 0;background-size: 24px;} .review-rating { text-align: center;margin-top: 5px;} .reader-description { width:100%;height:auto;margin:20px 0;display:flex;align-items:flex-start;gap:20px;} .reader-description .reader-avatar { flex-shrink:0;} .reader-topics{ display: flex;flex-wrap: wrap;gap:10px;margin:10px 0 20px;padding:0;} .reader-topics a{padding:5px 15px;color:#333;border-radius:5px;border:1px solid rgba(150,50,255,.75);background:rgba(90, 50, 180, .1);} .reader-topics a:hover{color:var(--color-main)} .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;} .heading-title{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .detail-hook {font-size:var(--font-size-7);color:var(--color-main);padding:0 0 10px 0;} .detail-description{padding-bottom:20px} .tag-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;} .tag-list .tag-item{ background:#fff;border:1px solid rgba(150,50,255,.25);box-shadow:0px 5px 15px -5px rgba(90,50,180,0.2);color:#333;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-tags{padding-bottom:10px} .related-title{font-size:var(--font-size-7);color:var(--color-main);padding:0 0 10px 0;}