:root {
--npi-primary:      #e63946;
--npi-bg:           #ffffff;
--npi-text:         #1d1d1f;
--npi-meta:         #6e6e73;
--npi-border:       #e0e0e0;
--npi-thumb-ratio:  56.25%; --npi-radius:       14px;
--npi-gap:          1.25rem;
--npi-font:         'Poppins', sans-serif;
--npi-shadow:       0 2px 10px rgba(20, 20, 40, .06);
--npi-shadow-hover: 0 14px 28px rgba(20, 20, 40, .14);
--npi-rank-1: #EC028B;
--npi-rank-2: #FFC90A;
--npi-rank-3: #D6171F;
--npi-rank-4: #A6CE39;
--npi-rank-5: #00B1F1;
--npi-rank-6: #0A315B;
--npi-rank-7: #0068B6;
--npi-rank-8: #F2591F;
} .npi-top-news {
font-family: var(--npi-font);
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--npi-gap);
}
.npi-top-news__widget-title {
font-family: var(--npi-font);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -.01em;
margin: 0 0 var(--npi-gap);
padding-left: .7rem;
border-left: 4px solid var(--npi-primary);
color: var(--npi-text);
}
.npi-top-news__item {
display: flex;
align-items: flex-start;
gap: .9rem;
background: var(--npi-bg);
border-radius: var(--npi-radius);
overflow: hidden;
position: relative;
padding: .75rem;
box-shadow: var(--npi-shadow);
transition: transform .25s ease, box-shadow .25s ease;
}
.npi-top-news__item:hover {
transform: translateY(-3px);
box-shadow: var(--npi-shadow-hover);
}
.npi-top-news__rank {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--npi-primary);
color: #fff;
font-size: .72rem;
font-weight: 800;
font-family: var(--npi-font);
display: flex;
align-items: center;
justify-content: center;
margin-top: .25rem;
box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
} .npi-top-news__item:nth-child(8n + 1) .npi-top-news__rank { background: var(--npi-rank-1); }
.npi-top-news__item:nth-child(8n + 2) .npi-top-news__rank { background: var(--npi-rank-2); }
.npi-top-news__item:nth-child(8n + 3) .npi-top-news__rank { background: var(--npi-rank-3); }
.npi-top-news__item:nth-child(8n + 4) .npi-top-news__rank { background: var(--npi-rank-4); }
.npi-top-news__item:nth-child(8n + 5) .npi-top-news__rank { background: var(--npi-rank-5); }
.npi-top-news__item:nth-child(8n + 6) .npi-top-news__rank { background: var(--npi-rank-6); }
.npi-top-news__item:nth-child(8n + 7) .npi-top-news__rank { background: var(--npi-rank-7); }
.npi-top-news__item:nth-child(8n + 8) .npi-top-news__rank { background: var(--npi-rank-8); }
.npi-top-news__thumb-link {
flex-shrink: 0;
width: 108px;
height: 84px;
border-radius: calc(var(--npi-radius) / 1.6);
overflow: hidden;
display: block;
}
.npi-top-news__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.npi-top-news__item:hover .npi-top-news__thumb {
transform: scale(1.05);
}
.npi-top-news__content {
flex: 1;
min-width: 0;
}
.npi-top-news__title {
font-size: .95rem;
font-weight: 600;
margin: 0 0 .35rem;
line-height: 1.4;
letter-spacing: -.01em;
}
.npi-top-news__title a {
color: var(--npi-text);
text-decoration: none;
transition: color .2s ease;
}
.npi-top-news__title a:hover {
color: var(--npi-primary);
}
.npi-top-news__meta {
display: flex;
flex-wrap: wrap;
gap: .5rem;
font-size: .78rem;
font-weight: 500;
color: var(--npi-meta);
}
.npi-top-news__views::before {
content: "👁 ";
}
.npi-top-news__empty {
color: var(--npi-meta);
font-style: italic;
} .npi-top-news--horizontal {
flex-direction: row;
flex-wrap: wrap;
}
.npi-top-news--horizontal .npi-top-news__item {
flex: 1 1 200px;
flex-direction: column;
}
.npi-top-news--horizontal .npi-top-news__thumb-link {
width: 100%;
height: 0;
padding-bottom: var(--npi-thumb-ratio);
position: relative;
}
.npi-top-news--horizontal .npi-top-news__thumb {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
} .npi-top-news--grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--npi-gap);
}
.npi-top-news--grid .npi-top-news__item {
flex-direction: column;
}
.npi-top-news--grid .npi-top-news__thumb-link {
width: 100%;
height: 0;
padding-bottom: var(--npi-thumb-ratio);
position: relative;
}
.npi-top-news--grid .npi-top-news__thumb {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
} .npi-top-news--minimal .npi-top-news__item {
border-bottom: 1px solid var(--npi-border);
padding: 0 0 .75rem;
border-radius: 0;
box-shadow: none;
}
.npi-top-news--minimal .npi-top-news__item:hover {
transform: none;
box-shadow: none;
}
.npi-top-news--minimal .npi-top-news__thumb-link {
display: none;
} .npi-top-news--magazine .npi-top-news__item:first-child {
flex-direction: column;
grid-column: 1 / -1;
}
.npi-top-news--magazine .npi-top-news__item:first-child .npi-top-news__thumb-link {
width: 100%;
height: 0;
padding-bottom: 40%;
position: relative;
}
.npi-top-news--magazine .npi-top-news__item:first-child .npi-top-news__thumb {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.npi-top-news--magazine .npi-top-news__item:first-child .npi-top-news__title {
font-size: 1.25rem;
} .npi-top-news--preset-dark {
--npi-bg:     #1a1a2e;
--npi-text:   #e0e0e0;
--npi-meta:   #a0a0b0;
--npi-border: #2e2e4e;
padding: 1rem;
border-radius: var(--npi-radius);
background: var(--npi-bg);
} .npi-top-news--preset-light {
--npi-bg:     #f8f8f8;
--npi-text:   #333;
padding: 1rem;
border-radius: var(--npi-radius);
background: var(--npi-bg);
} .npi-top-news--preset-bordered .npi-top-news__item {
border: 1px solid var(--npi-border);
padding: .75rem;
} .npi-top-news--preset-accent .npi-top-news__title a:hover {
color: #7209b7;
} @media (max-width: 600px) {
.npi-top-news--horizontal {
flex-direction: column;
}
.npi-top-news--grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 400px) {
.npi-top-news--grid {
grid-template-columns: 1fr;
}
}