:root {
--primary-blue: #2563eb;
--secondary-blue: #1e40af;
--light-blue: #eff6ff;
--hover-blue: #1d4ed8;
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--card-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--transition: all 0.3s ease;
}
:where([class^="ri-"])::before {
content: "\f3c2";
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.section-nav.scrolled {
box-shadow: var(--card-shadow);
}
.nav-link {
transition: var(--transition);
position: relative;
}
.nav-link.active {
color: var(--primary-blue);
font-weight: 600;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--primary-blue);
}
.content-section {
scroll-margin-top: 120px;
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.article-card {
transition: var(--transition);
cursor: pointer;
box-shadow: var(--card-shadow);
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--card-hover-shadow);
}
.category-filter {
transition: var(--transition);
}
.category-filter.active {
background: var(--primary-blue);
color: white;
}
.category-filter:not(.active):hover {
background: var(--light-blue);
}
.article-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: #6b7280;
}
.article-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
background: var(--light-blue);
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
color: var(--secondary-blue);
}
.search-box {
position: relative;
}
.search-box input {
padding-left: 2.5rem;
transition: var(--transition);
}
.search-box input:focus {
box-shadow: 0 0 0 2px var(--light-blue);
}
.search-box .search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
}