.nn-meta__views {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--nn-font-ui);
font-size: inherit;
color: inherit;
}
.nn-meta__icon {
flex-shrink: 0;
opacity: 0.6;
} .nn-trending {
padding: var(--nn-space-sm) 0;
}
.nn-trending__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--nn-space-md);
}
@media (min-width: 640px) {
.nn-trending__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.nn-trending__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.nn-trending__card {
display: flex;
gap: var(--nn-space-md);
padding: var(--nn-space-md);
background: var(--nn-color-white);
border-radius: var(--nn-radius-md);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
text-decoration: none;
color: inherit;
outline: none;
transition: all var(--nn-transition);
position: relative;
overflow: hidden;
--card-accent: var(--nn-color-indigo);
} .nn-trending__card.nn-cat-ai     { --card-accent: var(--nn-color-cat-ai); }
.nn-trending__card.nn-cat-design { --card-accent: var(--nn-color-cat-design); }
.nn-trending__card.nn-cat-dev    { --card-accent: var(--nn-color-cat-dev); }
.nn-trending__card:hover {
box-shadow: var(--nn-shadow-card-hover);
transform: translateY(-2px);
text-decoration: none;
}
.nn-trending__card:hover .nn-trending__card-title {
color: var(--card-accent);
}
.nn-trending__rank {
position: absolute;
top: var(--nn-space-sm);
left: var(--nn-space-sm);
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-badge);
font-weight: var(--nn-fw-extrabold);
background: var(--nn-color-gradient);
color: var(--nn-color-white);
width: 22px;
height: 22px;
border-radius: var(--nn-radius-full);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.nn-trending__thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: var(--nn-radius-sm);
overflow: hidden;
background: var(--nn-color-gray-100);
}
.nn-trending__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--nn-transition-slow);
}
.nn-trending__card:hover .nn-trending__img {
transform: scale(1.05);
}
.nn-trending__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--nn-space-xs);
justify-content: center;
}
.nn-trending__body .nn-category-badge {
font-size: 0.5625rem;
padding: 1px 6px;
align-self: flex-start;
}
.nn-trending__card-title {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-sm);
font-weight: var(--nn-fw-semibold);
color: var(--nn-color-ink);
line-height: var(--nn-lh-snug);
margin: 0;
transition: color var(--nn-transition);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nn-trending__meta {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-400);
display: flex;
align-items: center;
gap: var(--nn-space-sm);
} .nn-toc {
max-width: var(--nn-content-width);
margin: 0 auto var(--nn-space-xl);
padding: var(--nn-space-lg);
background: var(--nn-color-white);
border: var(--nn-border);
border-radius: var(--nn-radius-md);
}
.nn-toc__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--nn-space-sm);
}
.nn-toc__label {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-xs);
font-weight: var(--nn-fw-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--nn-color-gray-400);
}
.nn-toc__toggle {
background: var(--nn-color-gray-100);
border: none;
cursor: pointer;
padding: 6px;
color: var(--nn-color-gray-500);
transition: all var(--nn-transition);
border-radius: var(--nn-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.nn-toc__toggle:hover {
background: var(--nn-color-indigo-soft);
color: var(--nn-color-indigo);
}
.nn-toc__toggle[aria-expanded='false'] {
transform: rotate(-90deg);
}
.nn-toc__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
}
.nn-toc__toggle[aria-expanded='false'] + .nn-toc__list {
display: none;
}
.nn-toc__item {
counter-increment: toc;
}
.nn-toc__link {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-sm);
color: var(--nn-color-gray-700);
text-decoration: none;
padding: var(--nn-space-xs) var(--nn-space-sm);
display: flex;
align-items: center;
gap: var(--nn-space-sm);
border-radius: var(--nn-radius-sm);
transition: all var(--nn-transition);
}
.nn-toc__link::before {
content: counter(toc) '.';
color: var(--nn-color-gray-400);
font-weight: var(--nn-fw-semibold);
min-width: 22px;
font-size: var(--nn-fs-xs);
}
.nn-toc__link:hover {
background: var(--nn-color-gray-50);
color: var(--nn-color-indigo);
text-decoration: none;
}
.nn-toc__link.nn-toc__link--active {
color: var(--nn-color-indigo);
background: var(--nn-color-indigo-soft);
font-weight: var(--nn-fw-medium);
text-decoration: none;
} .nn-fresh {
display: inline-flex;
align-items: center;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-badge);
font-weight: var(--nn-fw-bold);
padding: 3px 10px;
border-radius: var(--nn-radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4;
gap: 4px;
}
.nn-fresh--new {
background: var(--nn-color-gradient);
color: var(--nn-color-white);
animation: nn-pulse-glow 3s ease infinite;
}
.nn-fresh--yesterday {
background: var(--nn-color-indigo-soft);
color: var(--nn-color-indigo);
border: 1px solid rgba(99, 102, 241, 0.15);
}
.nn-fresh--this-week {
background: var(--nn-color-indigo-soft);
color: var(--nn-color-indigo);
border: 1px solid rgba(99, 102, 241, 0.1);
}
.nn-fresh--updated {
background: var(--nn-cat-dev-bg);
color: var(--nn-cat-dev);
border: 1px solid var(--nn-cat-dev-border);
} .nn-series-nav {
max-width: var(--nn-content-width);
margin: 0 auto var(--nn-space-xl);
padding: var(--nn-space-lg);
border-left: 4px solid;
border-image: var(--nn-color-gradient) 1;
background: var(--nn-color-white);
border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0;
box-shadow: var(--nn-shadow-sm);
}
.nn-series-nav__label {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-badge);
font-weight: var(--nn-fw-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
background: var(--nn-color-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nn-series-nav__title {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-sm);
font-weight: var(--nn-fw-bold);
margin: var(--nn-space-xs) 0 var(--nn-space-md);
}
.nn-series-nav__title a {
color: var(--nn-color-ink);
text-decoration: none;
transition: color var(--nn-transition);
}
.nn-series-nav__title a:hover {
color: var(--nn-color-indigo);
}
.nn-series-nav__list {
padding-left: var(--nn-space-lg);
margin: 0;
}
.nn-series-nav__item {
padding: var(--nn-space-xs) 0;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-sm);
}
.nn-series-nav__item a {
color: var(--nn-color-indigo);
text-decoration: none;
transition: all var(--nn-transition);
}
.nn-series-nav__item a:hover {
text-decoration: underline;
}
.nn-series-nav__item--current {
font-weight: var(--nn-fw-semibold);
color: var(--nn-color-ink);
}
.nn-series-nav__badge {
font-size: var(--nn-fs-badge);
background: var(--nn-color-gradient);
color: var(--nn-color-white);
padding: 2px 8px;
border-radius: var(--nn-radius-full);
margin-left: var(--nn-space-sm);
font-weight: var(--nn-fw-bold);
} .nn-share {
display: flex;
align-items: center;
gap: var(--nn-space-md);
padding: var(--nn-space-md) 0;
}
.nn-share__label {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-400);
font-weight: var(--nn-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nn-share__buttons {
display: flex;
gap: var(--nn-space-sm);
}
.nn-share__btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--nn-radius-sm);
border: var(--nn-border);
background: var(--nn-color-white);
color: var(--nn-color-gray-500);
cursor: pointer;
text-decoration: none;
transition: all var(--nn-transition);
}
.nn-share__btn:hover {
color: var(--nn-color-white);
background: var(--nn-color-indigo);
border-color: var(--nn-color-indigo);
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--nn-shadow-md);
}
.nn-share__btn--copied {
background: var(--nn-cat-dev);
color: var(--nn-color-white);
border-color: var(--nn-cat-dev);
}
.nn-share__btn--copy.nn-copied {
color: var(--nn-cat-dev);
background: var(--nn-cat-dev-bg);
} .nn-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 9999;
pointer-events: none;
}
.nn-progress__bar {
height: 100%;
width: 0%;
background: var(--nn-color-gradient);
transition: width 100ms linear;
will-change: width;
border-radius: 0 var(--nn-radius-full) var(--nn-radius-full) 0;
} .nn-pillar-hub {
margin-bottom: var(--nn-space-2xl);
padding: var(--nn-space-xl) 0;
}
.nn-pillar-hub__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--nn-space-lg);
gap: var(--nn-space-md);
}
.nn-pillar-hub__title {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-h3);
font-weight: var(--nn-fw-bold);
color: var(--nn-color-ink);
}
.nn-pillar-hub__count {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-400);
flex-shrink: 0;
}
.nn-pillar-hub__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--nn-space-md);
}
.nn-pillar-cluster {
display: flex;
align-items: center;
gap: var(--nn-space-md);
padding: var(--nn-space-md);
background: var(--nn-color-white);
border: var(--nn-border);
border-radius: var(--nn-radius-md);
text-decoration: none;
color: inherit;
transition: all var(--nn-transition);
--card-accent: var(--nn-color-indigo);
}
.nn-pillar-cluster.nn-cat-ai     { --card-accent: var(--nn-color-cat-ai); }
.nn-pillar-cluster.nn-cat-design { --card-accent: var(--nn-color-cat-design); }
.nn-pillar-cluster.nn-cat-dev    { --card-accent: var(--nn-color-cat-dev); }
.nn-pillar-cluster:hover {
border-color: var(--card-accent);
box-shadow: var(--nn-shadow-md);
transform: translateY(-2px);
}
.nn-pillar-cluster__visual {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--nn-radius-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--nn-color-gray-50);
}
.nn-pillar-cluster__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nn-pillar-cluster__icon {
width: 24px;
height: 24px;
color: var(--card-accent);
}
.nn-pillar-cluster__icon svg {
width: 100%;
height: 100%;
}
.nn-pillar-cluster__body {
flex: 1;
min-width: 0;
}
.nn-pillar-cluster__name {
display: block;
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-sm);
font-weight: var(--nn-fw-semibold);
color: var(--nn-color-ink);
line-height: var(--nn-lh-snug);
}
.nn-pillar-cluster__desc {
display: block;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-500);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-pillar-cluster__meta {
display: block;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-badge);
color: var(--nn-color-gray-400);
margin-top: 2px;
}
.nn-pillar-cluster__arrow {
flex-shrink: 0;
color: var(--nn-color-gray-300);
transition: all var(--nn-transition);
}
.nn-pillar-cluster:hover .nn-pillar-cluster__arrow {
color: var(--card-accent);
transform: translateX(2px);
} .nn-cluster-nav {
margin: var(--nn-space-2xl) 0;
padding: var(--nn-space-lg);
background: var(--nn-color-gray-50);
border-radius: var(--nn-radius-md);
border-top: 3px solid var(--card-accent, var(--nn-color-indigo));
--card-accent: var(--nn-color-indigo);
}
.nn-cluster-nav.nn-cat-ai     { --card-accent: var(--nn-color-cat-ai); }
.nn-cluster-nav.nn-cat-design { --card-accent: var(--nn-color-cat-design); }
.nn-cluster-nav.nn-cat-dev    { --card-accent: var(--nn-color-cat-dev); }
.nn-cluster-nav__header {
margin-bottom: var(--nn-space-md);
}
.nn-cluster-nav__label {
display: block;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-badge);
font-weight: var(--nn-fw-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--card-accent);
margin-bottom: var(--nn-space-xs);
}
.nn-cluster-nav__title {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-h3);
font-weight: var(--nn-fw-bold);
color: var(--nn-color-ink);
text-decoration: none;
transition: color var(--nn-transition);
}
.nn-cluster-nav__title:hover {
color: var(--card-accent);
}
.nn-cluster-nav__list {
list-style: none;
padding: 0;
margin: 0;
}
.nn-cluster-nav__item {
padding: var(--nn-space-sm) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nn-cluster-nav__item:last-child {
border-bottom: none;
}
.nn-cluster-nav__item a {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-sm);
color: var(--nn-color-gray-700);
text-decoration: none;
transition: all var(--nn-transition);
display: block;
}
.nn-cluster-nav__item a:hover {
color: var(--card-accent);
padding-left: var(--nn-space-sm);
}
.nn-cluster-nav__pillar-link {
display: inline-block;
margin-top: var(--nn-space-md);
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
font-weight: var(--nn-fw-semibold);
color: var(--card-accent);
text-decoration: none;
transition: opacity var(--nn-transition);
}
.nn-cluster-nav__pillar-link:hover {
opacity: 0.8;
} .nn-pillar-topics__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--nn-space-lg);
}
.nn-pillar-topic {
padding: var(--nn-space-lg);
background: var(--nn-color-white);
border: var(--nn-border);
border-radius: var(--nn-radius-lg);
transition: all var(--nn-transition);
--card-accent: var(--nn-color-indigo);
}
.nn-pillar-topic.nn-cat-ai     { --card-accent: var(--nn-color-cat-ai); }
.nn-pillar-topic.nn-cat-design { --card-accent: var(--nn-color-cat-design); }
.nn-pillar-topic.nn-cat-dev    { --card-accent: var(--nn-color-cat-dev); }
.nn-pillar-topic:hover {
border-color: var(--card-accent);
box-shadow: var(--nn-shadow-md);
}
.nn-pillar-topic__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--nn-space-md);
padding-bottom: var(--nn-space-sm);
border-bottom: 2px solid var(--card-accent);
}
.nn-pillar-topic__name {
font-family: var(--nn-font-heading);
font-size: var(--nn-fs-h3);
font-weight: var(--nn-fw-bold);
color: var(--nn-color-ink);
text-decoration: none;
transition: color var(--nn-transition);
}
.nn-pillar-topic__name:hover {
color: var(--card-accent);
}
.nn-pillar-topic__count {
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-400);
flex-shrink: 0;
}
.nn-pillar-topic__clusters {
display: flex;
flex-wrap: wrap;
gap: var(--nn-space-sm);
}
.nn-pillar-topic__cluster {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
font-weight: var(--nn-fw-medium);
color: var(--nn-color-gray-700);
background: var(--nn-color-gray-50);
border-radius: var(--nn-radius-full);
text-decoration: none;
transition: all var(--nn-transition);
}
.nn-pillar-topic__cluster:hover {
background: var(--nn-color-indigo-soft);
color: var(--card-accent);
}
.nn-pillar-topic__cluster-count {
font-size: var(--nn-fs-badge);
color: var(--nn-color-gray-400);
font-weight: var(--nn-fw-regular, 400);
}
.nn-pillar-topic__more {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-family: var(--nn-font-ui);
font-size: var(--nn-fs-xs);
font-weight: var(--nn-fw-semibold);
color: var(--card-accent);
text-decoration: none;
transition: opacity var(--nn-transition);
}
.nn-pillar-topic__more:hover {
opacity: 0.8;
}
@media (max-width: 639px) {
.nn-pillar-hub__grid {
grid-template-columns: 1fr;
}
.nn-pillar-topics__grid {
grid-template-columns: 1fr;
}
}