Header.module.css

1.header {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  padding: 1.25rem 2rem;
6  background-color: var(--color-card);
7  color: var(--color-text);
8  border-bottom: 1px solid var(--color-border);
9  transition: background-color 0.3s ease, color 0.3s ease;
10}
11
12.logo {
13  font-size: 1.5rem;
14  font-weight: 700;
15  color: var(--color-text);
16}
17
18.navList {
19  list-style: none;
20  display: flex;
21  gap: 1.5rem;
22  padding: 0;
23  margin: 0;
24}
25
26.navLink {
27  text-decoration: none;
28  color: var(--color-text);
29  font-weight: 500;
30  transition: color 0.3s ease, border-bottom 0.2s ease;
31}
32
33.navLink:hover {
34  color: var(--color-primary);
35  border-bottom: 2px solid var(--color-primary);
36}