1@use "@/common/styles/colors" as *
2
3nav
4 position: fixed
5 top: 0
6 left: 0
7 right: 0
8 z-index: 100
9 padding: 2rem 0 0
10 transition: padding 0.2s ease, background-color 0.2s ease, border-color 0.2s ease
11
12nav.nav-scrolled
13 padding-top: 0.85rem
14 padding-bottom: 0.85rem
15 background: rgba($background, 0.9)
16 backdrop-filter: blur(18px)
17 border-bottom: 1px solid $border-color
18
19.nav-inner
20 display: grid
21 grid-template-columns: 1fr auto 1fr
22 align-items: center
23 width: min(1180px, calc(100% - 3rem))
24 margin: 0 auto
25 color: $text
26
27.logo-area
28 justify-self: start
29 display: inline-flex
30 align-items: center
31 gap: 0.75rem
32 min-width: 0
33 padding: 0.45rem 0.75rem
34 color: $text
35 border: 1px solid transparent
36 border-radius: 0.75rem
37 text-decoration: none
38 transition: background-color 0.15s ease, border-color 0.15s ease
39
40 &:hover
41 background-color: $background-card
42 border-color: $border-hover
43
44 img
45 width: 1.875rem
46 height: 1.875rem
47 border-radius: 6px
48 flex-shrink: 0
49
50 span
51 font-size: 1.5rem
52 line-height: 1
53 font-weight: 700
54 letter-spacing: -0.03em
55
56.nav-links
57 justify-self: center
58 display: inline-flex
59 align-items: center
60 gap: 0.375rem
61 padding: 0.35rem
62 background: rgba($background-lighter, 0.68)
63 border: 1px solid $border-color
64 border-radius: 0.9rem
65 box-shadow: $shadow-sm
66
67 a
68 display: inline-flex
69 align-items: center
70 gap: 0.35rem
71 min-height: 2.25rem
72 padding: 0.45rem 0.8rem
73 color: $text-secondary
74 font-size: 0.9rem
75 font-weight: 600
76 line-height: 1
77 border: 1px solid transparent
78 border-radius: 0.65rem
79 transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease
80
81 &:hover
82 color: $text
83 background: $background-card
84 border-color: $border-color
85
86 &.active
87 color: $primary-light
88 background: rgba($primary, 0.1)
89 border-color: rgba($primary, 0.25)
90
91 .external-icon
92 width: 0.65rem
93 height: 0.65rem
94 color: $text-muted
95
96.nav-actions
97 justify-self: end
98 display: flex
99 align-items: center
100 gap: 0.75rem
101
102.github-link,
103.mobile-toggle,
104.mobile-close
105 display: inline-flex
106 align-items: center
107 justify-content: center
108 width: 2.5rem
109 height: 2.5rem
110 background: transparent
111 border: 1px solid $border-color
112 border-radius: 0.75rem
113 color: $text-secondary
114 cursor: pointer
115 transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease
116
117 &:hover
118 color: $primary-light
119 background: $background-card
120 border-color: $border-hover
121 transform: translateY(-1px)
122
123 svg
124 width: 1.1rem
125 height: 1.1rem
126
127.mobile-toggle
128 display: none
129 font-family: inherit
130
131.mobile-nav
132 position: fixed
133 top: 0
134 right: 0
135 width: min(100%, 330px)
136 height: 100vh
137 z-index: 150
138 background: $background-lighter
139 border-left: 1px solid $border-color
140 transform: translateX(100%)
141 transition: transform 0.22s ease
142 box-shadow: $shadow-lg
143
144.mobile-nav.mobile-open
145 transform: translateX(0)
146
147.mobile-header
148 display: flex
149 align-items: center
150 justify-content: space-between
151 padding: 1.25rem 1.5rem
152 border-bottom: 1px solid $border-color
153
154.mobile-logo
155 display: inline-flex
156 align-items: center
157 gap: 0.75rem
158 color: $text
159 text-decoration: none
160
161 img
162 width: 1.875rem
163 height: 1.875rem
164 border-radius: 6px
165
166 span
167 font-size: 1.25rem
168 font-weight: 700
169
170.mobile-close
171 width: 2.25rem
172 height: 2.25rem
173 background: $background-card
174
175.mobile-links
176 display: flex
177 flex-direction: column
178 gap: 0.35rem
179 padding: 1rem
180
181 a
182 display: flex
183 align-items: center
184 justify-content: space-between
185 gap: 0.5rem
186 padding: 0.9rem 1rem
187 color: $text-secondary
188 font-size: 1rem
189 font-weight: 600
190 border: 1px solid transparent
191 border-radius: 0.75rem
192 transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease
193
194 &:hover,
195 &.active
196 color: $text
197 background: $background-card
198 border-color: $border-color
199
200 &.active
201 color: $primary-light
202
203 .external-icon
204 width: 0.75rem
205 height: 0.75rem
206 color: $text-muted
207
208.mobile-overlay
209 position: fixed
210 inset: 0
211 z-index: 140
212 background: rgba(0, 0, 0, 0.55)
213 backdrop-filter: blur(4px)
214
215@media (max-width: 900px)
216 nav
217 padding-top: 1rem
218
219 nav.nav-scrolled
220 padding-top: 0.8rem
221 padding-bottom: 0.8rem
222
223 .nav-inner
224 grid-template-columns: 1fr auto
225 width: min(100% - 2rem, 1180px)
226
227 .nav-links,
228 .github-link
229 display: none
230
231 .mobile-toggle
232 display: inline-flex
233
234@media (max-width: 480px)
235 .nav-inner
236 width: min(100% - 1.5rem, 1180px)
237
238 .logo-area
239 padding-left: 0.35rem
240 padding-right: 0.35rem
241
242 span
243 font-size: 1.25rem
244