1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
.nav
position: absolute
top: 0
width: 100%
transition: height 0.4s cubic-bezier(0.52, 0.16, 0.24, 1)
z-index: 999
&_bar
width: 100%
position: relative
&-wrap
width: 1.8rem
height: 1.8rem
display: grid
align-items: center
cursor: pointer
z-index: 99
min-height: 1.5rem
&,
&::after,
&::before
padding: 1px
border-radius: 2px
background-color: var(--text)
&::after,
&::before
content: ""
position: absolute
width: 1.2rem
&::before
top: -0.5rem
&::after
top: 0.5rem
right: 0
&-body
box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.17)
position: fixed
right: 10px
z-index: 1
top: 100%
opacity: 0
overflow: hidden
transition:top 0.33s linear
background: transparent
background-color: var(--accent)
width: 16rem
padding: 100px 0
min-height: 100vh
z-index: 1
&:hover
box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.27)
a
display: block
padding: 12.5px 25px
margin-bottom: 2px
border-bottom: 1px solid var(--accent)
transition:color 0.25s ease-in-out
&:hover
color: var(--theme)
&-brand
font-family: 'Cookie'
font-size: 2em !important
padding-top: 0 !important
padding-bottom: 0 !important
&-close
display: flex
justify-content: flex-start
align-items: center
position: absolute
top: 0
right: 0
width: 100%
cursor:pointer
padding: 25px
&:after,
&:before
content: ''
width: 18px
border-radius 50%
padding: 1.5px
background: var(--text)
opacity: 0.7
position: relative
&:before
transform: rotate(20deg) translateX(1.5px)
&:after
transform: rotate(-20deg) translateX(-1.5px)
&-drop
cursor: pointer
top: 0
bottom: 0
z-index: 1000
&-exit
animation: hideMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
&-menu
position: relative
padding: 10px 25px 10px 0
height: 100%
max-width: 1024px
margin: 0 auto
display: flex
align-items: center
justify-content: space-between
a
color: inherit
width: 100%
display: block
padding: 10px 25px
font-size: 105%
&-pop
position: fixed
width: 100vw
background: rgba(0,0,0,0.05)
&-open
animation: showMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
&_item
text-transform: capitalize
|
