.nn-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: rgba(250, 250, 248, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--nn-color-gray-200);
padding: 8px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
height: calc(60px + env(safe-area-inset-bottom));
gap: 8px;
align-items: center;
}
[data-theme="dark"] .nn-bottom-nav {
background: rgba(15, 23, 42, 0.96);
border-top-color: rgba(241, 245, 249, 0.08);
}
.nn-bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 52px;
min-height: 44px;
padding: 6px 8px;
border-radius: 10px;
border: none;
background: none;
color: var(--nn-color-gray-500);
font-size: 10px;
font-family: var(--nn-font-ui);
font-weight: var(--nn-fw-semibold);
text-decoration: none;
cursor: pointer;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.nn-bottom-nav__item:hover,
.nn-bottom-nav__item--active {
color: var(--nn-color-indigo);
background: var(--nn-color-indigo-soft);
}
.nn-bottom-nav__search-wrap {
flex: 1;
min-width: 0;
}
.nn-bottom-search-form {
display: flex;
align-items: center;
background: var(--nn-color-gray-100);
border-radius: 22px;
border: 1.5px solid transparent;
padding: 0 14px;
height: 44px;
gap: 8px;
transition: border-color 0.15s, background 0.15s;
}
.nn-bottom-search-form:focus-within {
background: var(--nn-color-white);
border-color: var(--nn-color-indigo);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.nn-bottom-search-icon {
color: var(--nn-color-gray-400);
flex-shrink: 0;
}
.nn-bottom-search-input {
flex: 1;
background: none;
border: none;
outline: none;
font-family: var(--nn-font-ui);
font-size: 15px;
color: var(--nn-color-ink);
min-width: 0;
}
.nn-bottom-search-input::placeholder {
color: var(--nn-color-gray-400);
} @media (max-width: 1023px) {
.nn-bottom-nav {
display: flex;
}
.nn-main,
.nn-footer {
padding-bottom: calc(60px + env(safe-area-inset-bottom) + 8px);
} .nn-mobile-toggle {
display: none !important;
}
} @media (min-width: 1024px) {
.nn-bottom-nav {
display: none !important;
}
} @media (max-width: 639px) {
.nn-post-nav {
flex-direction: column;
gap: 0;
}
.nn-post-nav-prev,
.nn-post-nav-next {
padding: var(--nn-space-md) 0;
border-bottom: 1px solid var(--nn-color-gray-100);
}
.nn-post-nav-next {
text-align: left;
border-bottom: none;
} .nn-toc__list {
display: none;
}
.nn-toc__toggle {
transform: rotate(180deg);
}
.nn-toc__toggle[aria-expanded="true"] + .nn-toc__list,
.nn-toc__list:not([style]) { }
} @media (max-width: 374px) {
:root {
--nn-fs-base: 0.9rem;
--nn-space-lg: 1rem;
--nn-space-xl: 1.25rem;
}
.nn-page-container {
padding: 0 12px;
}
.nn-article-title {
font-size: 1.35rem;
}
.nn-about-masthead__title {
font-size: 1.6rem;
}
.nn-hero__title {
font-size: 1.5rem;
}
.nn-card {
border-radius: 10px;
}
.nn-card__excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nn-bottom-nav__item span {
display: none; }
.nn-bottom-nav__item {
min-width: 44px;
}
} @media (min-width: 375px) and (max-width: 479px) {
.nn-page-container {
padding: 0 16px;
}
.nn-article-title {
font-size: 1.5rem;
}
.nn-hero__title {
font-size: 1.75rem;
}
} @media (min-width: 480px) and (max-width: 639px) {
.nn-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.nn-hero__title {
font-size: 2rem;
}
.nn-about-cats-grid {
grid-template-columns: 1fr 1fr;
}
} @media (min-width: 640px) and (max-width: 767px) {
.nn-posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--nn-space-lg);
}
.nn-hero__title {
font-size: 2.25rem;
}
.nn-about-profile-wrap {
gap: var(--nn-space-xl);
}
} @media (min-width: 768px) and (max-width: 819px) {
.nn-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.nn-hero__title {
font-size: 2.5rem;
}
.nn-single-layout {
grid-template-columns: 1fr;
}
.nn-single-sidebar {
display: none;
}
.nn-about-profile-wrap {
flex-direction: row;
align-items: flex-start;
}
} @media (min-width: 820px) and (max-width: 959px) {
.nn-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.nn-hero__title {
font-size: 2.75rem;
}
.nn-about-cats-grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (min-width: 960px) and (max-width: 1023px) {
.nn-posts-grid {
grid-template-columns: repeat(3, 1fr);
}
.nn-hero__title {
font-size: 3rem;
}
} @media (min-width: 1024px) and (max-width: 1099px) {
.nn-posts-grid {
grid-template-columns: repeat(3, 1fr);
}
.nn-page-container {
padding: 0 var(--nn-space-xl);
}
} @media (min-width: 1100px) and (max-width: 1199px) {
.nn-posts-grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (min-width: 1200px) and (max-width: 1279px) {
.nn-posts-grid {
grid-template-columns: repeat(3, 1fr);
}
.nn-hero__title {
font-size: 3.5rem;
}
} @media (min-width: 1280px) and (max-width: 1439px) {
.nn-hero__title {
font-size: 3.75rem;
}
} @media (min-width: 1440px) and (max-width: 1535px) {
:root {
--nn-content-width: 780px;
}
.nn-hero__title {
font-size: 4rem;
}
}  .nn-about-profile-wrap {
display: flex;
gap: var(--nn-space-2xl);
align-items: flex-start;
}
.nn-about-profile-photo-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--nn-space-lg);
}
.nn-about-profile-img {
width: 200px;
height: 240px;
object-fit: cover;
border-radius: 16px;
box-shadow: var(--nn-shadow-lg);
}
.nn-about-profile-avatar-fallback {
width: 200px;
height: 200px;
border-radius: 50%;
background: var(--nn-color-gradient);
color: white;
font-size: 4rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.nn-about-profile-stats {
display: flex;
gap: var(--nn-space-lg);
}
.nn-about-stat {
text-align: center;
}
.nn-about-stat__number {
display: block;
font-family: var(--nn-font-heading);
font-size: 1.75rem;
font-weight: var(--nn-fw-bold);
color: var(--nn-color-indigo);
line-height: 1;
}
.nn-about-stat__label {
display: block;
font-size: var(--nn-fs-xs);
color: var(--nn-color-gray-400);
margin-top: 4px;
}
.nn-about-skills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: var(--nn-space-md) 0;
}
.nn-about-skill-tag {
display: inline-block;
padding: 4px 12px;
background: var(--nn-color-indigo-soft);
color: var(--nn-color-indigo);
border-radius: var(--nn-radius-full);
font-size: var(--nn-fs-xs);
font-weight: var(--nn-fw-semibold);
font-family: var(--nn-font-ui);
}
.nn-about-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--nn-space-md);
margin-top: var(--nn-space-md);
}
.nn-about-gallery__img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--nn-radius-md);
box-shadow: var(--nn-shadow-sm);
}
.nn-about-editor-content {
max-width: var(--nn-content-width);
margin: 0 auto;
} @media (max-width: 767px) {
.nn-about-profile-wrap {
flex-direction: column;
align-items: center;
text-align: center;
}
.nn-about-profile-content {
text-align: left;
}
.nn-about-profile-img {
width: 160px;
height: 190px;
}
.nn-about-gallery {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 479px) {
.nn-about-gallery {
grid-template-columns: 1fr;
}
.nn-about-profile-img {
width: 140px;
height: 170px;
}
} @media (min-width: 768px) and (max-width: 1023px) {
.nn-about-profile-img {
width: 180px;
height: 215px;
}
}