pixies

1@use "@/common/styles/colors" as *
2
3.submission-page
4  min-height: 100vh
5  padding: 8rem 4rem 4rem
6  display: flex
7  justify-content: center
8
9.submission-container
10  width: 100%
11  max-width: 900px
12
13.submission-header
14  text-align: center
15  margin-bottom: 3rem
16  
17  h1
18    font-size: 2.5rem
19    font-weight: 700
20    margin-bottom: 0.75rem
21    
22  p
23    font-size: 1.125rem
24    color: $text-secondary
25
26.submission-content
27  display: grid
28  grid-template-columns: 1fr 320px
29  gap: 2rem
30  align-items: start
31
32.submission-form
33  background: $background-lighter
34  border: 1px solid $border-color
35  border-radius: 16px
36  padding: 2rem
37  display: flex
38  flex-direction: column
39  gap: 1.5rem
40
41.form-group
42  display: flex
43  flex-direction: column
44  gap: 0.5rem
45  
46  label
47    font-size: 0.9375rem
48    font-weight: 500
49    color: $text
50    
51    .optional
52      font-weight: 400
53      color: $text-muted
54      
55  input, select, textarea
56    padding: 0.875rem 1rem
57    background: $background
58    border: 1px solid $border-color
59    border-radius: 8px
60    color: $text
61    font-size: 1rem
62    font-family: inherit
63    transition: border-color 0.2s ease
64    
65    &::placeholder
66      color: $text-muted
67      
68    &:focus
69      outline: none
70      border-color: $primary
71      
72  select
73    cursor: pointer
74    
75  textarea
76    resize: vertical
77    min-height: 100px
78
79.form-checkbox
80  display: flex
81  align-items: flex-start
82  gap: 0.75rem
83  
84  input[type="checkbox"]
85    width: 18px
86    height: 18px
87    margin-top: 2px
88    accent-color: $primary
89    cursor: pointer
90    
91  label
92    font-size: 0.9375rem
93    color: $text-secondary
94    cursor: pointer
95    line-height: 1.5
96
97.guidelines
98  background: $background-lighter
99  border: 1px solid $border-color
100  border-radius: 16px
101  padding: 1.5rem
102  position: sticky
103  top: 6rem
104
105.guidelines-header
106  display: flex
107  align-items: center
108  gap: 0.75rem
109  margin-bottom: 1rem
110  padding-bottom: 1rem
111  border-bottom: 1px solid $border-color
112  
113  svg
114    color: $blue
115    font-size: 1.125rem
116    
117  h3
118    font-size: 1rem
119    font-weight: 600
120    margin: 0
121
122.guidelines ul
123  list-style: none
124  display: flex
125  flex-direction: column
126  gap: 0.75rem
127  
128  li
129    font-size: 0.875rem
130    color: $text-secondary
131    line-height: 1.5
132    padding-left: 1.25rem
133    position: relative
134    
135    &::before
136      content: ""
137      position: absolute
138      left: 0
139      top: 8px
140      width: 5px
141      height: 5px
142      background: $primary
143      border-radius: 50%
144
145.success-state
146  text-align: center
147  display: flex
148  flex-direction: column
149  align-items: center
150  gap: 1.5rem
151  padding: 4rem 2rem
152  
153  .success-icon
154    width: 80px
155    height: 80px
156    background: rgba($primary, 0.1)
157    border-radius: 50%
158    display: flex
159    align-items: center
160    justify-content: center
161    
162    svg
163      font-size: 2.5rem
164      color: $primary
165      
166  h1
167    font-size: 2rem
168    font-weight: 700
169    
170  p
171    font-size: 1.125rem
172    color: $text-secondary
173    max-width: 400px
174
175@media (max-width: 900px)
176  .submission-content
177    grid-template-columns: 1fr
178    
179  .guidelines
180    position: static
181
182@media (max-width: 640px)
183  .submission-page
184    padding: 6rem 1.5rem 3rem
185    
186  .submission-header h1
187    font-size: 2rem
188    
189  .submission-form
190    padding: 1.5rem