-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.styl
247 lines (237 loc) · 5.86 KB
/
styles.styl
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
html
font-size 16px
body
background linear-gradient(0deg, #19221a, #19292e)
overflow-x hidden
margin 0
header
padding 1rem
.f
display flex
.fc
flex-direction column
.ac
align-items center
.jcc
justify-content center
.jsc
justify-self center
.f1
flex 1
h1, .h1
font-size 3rem
p
line-height 1.7
font-size 1.4rem
*
--font1 "Play"
font-family 'Share Tech', monospace
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
box-sizing: border-box;
input, button
font-size: 1.2rem;
input
background: rgb(42 70 50);
padding 0 0 0 2rem
border: 0;
&::placeholder
color #ffffffbf
button
border 0
background: #4d879d
padding: 0 2rem;
cursor pointer
form
border-radius 8px
overflow hidden
margin 0 auto
width 350px
input
background #566b5c
flex 1
> *
height 62px
color white
.container
max-width 1280px
padding 0 2rem
margin 0 auto
ul
margin 0
padding 0
flex-direction column
@media (min-width 960px)
flex-direction row
li
list-style none
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
font-family var(--font1)
h1
margin 0
font-size: 3.75rem;
h2
font-size 1.4rem
svg,img
width 100%
height auto
overflow visible
&#bg
z-index -4
pointer-events none
position: absolute;
align-self: center;
width: 100%;
transform: scale(8.5);
opacity: .1;
height 200px
header
position absolute
svg
position absolute
width 160px
height auto
section
position relative
&#hero
padding 4rem 2rem 10rem
@media (min-width 968px)
padding 4rem 2rem 3rem
&:before
z-index -5
position absolute
background radial-gradient(circle at 50% 100%, #3b5440 30%, #082020)
content ""
width 100%
height 100%
top 0
hgroup
text-align center
max-width 720px
margin 3rem 0 1rem
color white
#graphic
box-shadow 0px 20px 50px 0px rgba(0 0 0 29%)
@media (min-width 968px)
box-shadow 0px 20px 50px 0px rgba(0 0 0 79%)
max-width 1280px
height: auto;
width: 90vw;
z-index: -3;
margin: 0 0 -4rem;
z-index: -3
border-radius: 16px;
margin: 0 0 -4rem;
overflow: hidden;
border: 2px solid #385557;
small
font-size: 1.2rem;
color: #ffffff8a;
margin 0 0 1rem
form
margin 0 0 3rem
&#desc
&:before
position absolute
pointer-events: none;
background linear-gradient(0deg, #42686e, #314141)
z-index: -3;
clip-path: ellipse(4000px 100% at 50% 100%)
content: '';
top: -4rem;
bottom: 0;
right: 0;
left: 0;
.container
padding 4rem 2rem 0
@media (min-width desktop)
padding 0 2rem
hgroup
text-align center
max-width 660px
margin 0 auto
color white
h2
margin 0
p
margin .5rem 0 1.5rem
ul
li
padding 1rem
.inner
padding: 1rem 2rem
border-radius: 6px;
background: #516a6e
border-top 3px solid #70b47d
box-shadow: 0px 10px 10px -6px #0000002e;
h3
color white
margin .75rem 0 1rem
p
font-size 1rem
color #b9c9cd
#desc-svg
padding 4rem 0 0 1rem
position relative
z-index -2
height 520px
@media (min-width 960px)
height: 680px
#secondary
@media (min-width 960px)
width: 1300px;
// max-width: 100%
@media (min-width 1520px)
width: 1420px;
position: absolute
overflow: hidden;
border-radius: 8px;
border: 2px solid #43575b;
box-shadow: 0px 30px 30px #121b1c;
&#extended
--bg #75997c
position relative
@media (min-width 960px)
height 440px
hgroup
text-align center
h2
margin 0 auto
max-width 510px
&:before
position: absolute;
pointer-events: none;
background: linear-gradient( 0deg, #74997b, #88bc9b);
z-index: -3;
clip-path: ellipse(3000px 100% at 50% 100%);
content: '';
top: -7rem;
bottom: 4rem;
right: 0;
left: 0;
z-index: -1;
ul
margin 3rem 0 0
li
margin: 1rem;
padding: 1rem 2rem;
background: #88ab96;
border-radius: 12px;
border-top: 3px solid #a1beca;
p
font-size 1rem
&#email
margin 4rem auto 6rem
hgroup
color white
footer
background: #121c15;
padding: 1rem;
svg
width 150px
#footer-btm
margin .5rem 0 0 0
color #ffffff80