body.page.hero-state-a .hero-trending .hero-shell {
background: radial-gradient(circle at top left, rgba(39, 243, 255, 0.22), transparent 55%), radial-gradient(circle at bottom right, rgba(255, 122, 26, 0.22), transparent 55%), linear-gradient(135deg, #05060a, #05060a);
}
body.page.hero-state-b .hero-trending .hero-shell {
background: linear-gradient(135deg, #05060a 0%, #05060a 40%, #111320 100%);
box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.4), 0 40px 120px rgba(0, 0, 0, 1);
}
body.page.hero-state-b .hero-trending .hero-visual-panel {
background: radial-gradient(circle at 10% 0, rgba(255, 122, 26, 0.6), transparent 55%), radial-gradient(circle at 90% 100%, rgba(39, 243, 255, 0.5), transparent 55%), #05060a;
box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.5), 0 0 60px rgba(255, 122, 26, 0.85);
}
body.page.hero-state-c .hero-trending .hero-shell {
background: radial-gradient(circle at 0 0, rgba(39, 243, 255, 0.3), transparent 60%), radial-gradient(circle at 100% 100%, rgba(255, 122, 26, 0.3), transparent 60%), #05060a;
}
body.page.hero-state-c .hero-trending .hero-visual-panel {
background: conic-gradient(from 210deg, rgba(39, 243, 255, 0.2), rgba(255, 122, 26, 0.2), rgba(39, 243, 255, 0.2));
}
.section-header {
max-width: var(--container-wide-width);
margin-bottom: var(--space-2xl);
}
.section-header-main {
align-items: flex-start;
justify-content: space-between;
}
.hero-actions-row {
flex-wrap: wrap;
}
.hero-media-trending {
margin-top: var(--space-lg);
box-shadow: var(--shadow-strong);
}
.hero-media-img {
object-fit: cover;
}
.section-trending-list {
position: relative;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
background: radial-gradient(circle at top, rgba(39, 243, 255, 0.08), transparent 55%), radial-gradient(circle at bottom, rgba(255, 122, 26, 0.08), transparent 55%), var(--color-bg);
}
.section-trending-list::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(39, 243, 255, 0.7), rgba(255, 122, 26, 0.7), transparent);
opacity: 0.7;
pointer-events: none;
}
.trending-layout {
align-items: flex-start;
}
.trending-primary {
min-width: 0;
}
.trending-aside-card {
height: 100%;
}
.trending-controls {
align-items: stretch;
}
.trending-sort-select {
background-color: #05060a;
}
.trending-filters {
flex-wrap: wrap;
}
.trending-filter.is-active,
.trending-chip.is-active {
border-color: rgba(39, 243, 255, 0.9);
background: radial-gradient(circle at 0 0, rgba(39, 243, 255, 0.4), rgba(39, 243, 255, 0.08));
color: var(--color-accent-cyan);
box-shadow: var(--shadow-glow-cyan);
}
.trending-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-lg);
}
.trending-item {
position: relative;
}
.list-articles-item-tight {
gap: var(--space-md);
}
.trending-metrics {
margin-top: var(--space-md);
flex-wrap: wrap;
}
.trending-metric {
display: inline-flex;
flex-direction: column;
min-width: 0;
}
.trending-metric span + span {
margin-left: 0;
}
.trending-metric span:first-child {
margin-bottom: var(--space-2xs);
}
.badge-trending {
position: relative;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}
.badge-trending::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 140%;
height: 220%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(39, 243, 255, 0.6), transparent 60%);
opacity: 0.55;
filter: blur(10px);
z-index: -1;
}
.badge-orange.badge-trending::before {
background: radial-gradient(circle, rgba(255, 122, 26, 0.7), transparent 60%);
}
.trending-item:hover .badge-trending {
box-shadow: 0 0 0 1px rgba(39, 243, 255, 0.8), 0 0 22px rgba(39, 243, 255, 0.9);
}
.trending-item:hover .badge-orange.badge-trending {
box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.8), 0 0 22px rgba(255, 122, 26, 0.9);
}
.trending-tag-cloud {
row-gap: var(--space-sm);
}
.trending-tag-cloud .tag {
background: rgba(5, 6, 10, 0.9);
}
.trending-tag-cloud .tag:hover {
border-color: rgba(39, 243, 255, 0.7);
box-shadow: var(--shadow-glow-cyan);
}
.section-community-trends {
background: radial-gradient(circle at top left, rgba(39, 243, 255, 0.06), transparent 55%), radial-gradient(circle at bottom right, rgba(255, 122, 26, 0.06), transparent 55%), var(--color-bg);
}
.community-grid {
align-items: stretch;
}
.community-card {
height: 100%;
}
.community-quote {
margin: 0;
padding-left: var(--space-lg);
border-left: 2px solid rgba(39, 243, 255, 0.7);
color: var(--color-text-muted);
font-style: italic;
}
.community-quote p {
margin-bottom: var(--space-sm);
}
.community-quote cite {
display: block;
}
.community-media {
box-shadow: var(--shadow-soft);
}
.hero-actions-row .btn,
.trending-filters .btn,
.trending-tag-cloud .tag,
.pagination-button,
.trending-item,
.community-card,
.trending-aside-card {
transition: box-shadow var(--transition-med), transform var(--transition-med), border-color var(--transition-med), background-color var(--transition-med), color var(--transition-med);
}
.hero-actions-row .btn:hover,
.hero-actions-row .btn:focus-visible {
box-shadow: 0 0 0 1px rgba(39, 243, 255, 0.9), 0 0 26px rgba(39, 243, 255, 0.9);
}
.trending-filters .btn:hover,
.trending-filters .btn:focus-visible {
box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.9), 0 0 22px rgba(255, 122, 26, 0.9);
background-color: rgba(255, 122, 26, 0.08);
color: var(--color-accent-orange);
}
.pagination-button:hover,
.pagination-button:focus-visible {
border-color: rgba(39, 243, 255, 0.8);
box-shadow: 0 0 18px rgba(39, 243, 255, 0.7);
color: var(--color-accent-cyan);
}
.trending-item:hover {
transform: translateY(-2px);
}
.community-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-strong);
}
@media (max-width: 1023.98px) {
.section-header-main {
flex-direction: column;
}
.trending-controls {
width: 100%;
}
.trending-aside {
order: -1;
}
}
@media (max-width: 767.98px) {
.section-header {
margin-bottom: var(--space-xl);
}
.trending-filters {
justify-content: flex-start;
}
.hero-actions-row .btn {
max-width: 100%;
}
}
@media (max-width: 479.98px) {
.trending-filters {
flex-direction: column;
}
.trending-filters .btn {
width: 100%;
}
}