Add a new test to ARES6
[WebKit-https.git] / PerformanceTests / ARES-6 / styles.css
1 html {
2     font-family: "Helvetica Neue","Helvetica",sans-serif;
3     font-size: 62.5%;
4     font-synthesis: none;
5 }
6
7 body {
8     margin: 0;
9     background-color: #2C2C3C;
10     width: 100%;
11     font-size: 1.6rem;
12     font-weight: 400;
13     line-height: 1.4;
14     color: #9B9B9B;
15     box-sizing: border-box;
16     padding: 6vw 9vw;
17 }
18
19 .swoop {
20     position: absolute;
21     top: 0;
22     left: 0;
23     bottom: 0;
24     right: 0;
25     background-image: url('swoop.svg');
26     background-repeat: no-repeat;
27     background-size: 50vw;
28     width: 0;
29     animation: wipe-in 1s ease-in 0ms forwards;
30 }
31
32 header,
33 main,
34 footer {
35     box-sizing: border-box;
36     max-width: 780px;
37     margin: 0 auto;
38 }
39
40 p a {
41     color: #E7B135;
42     text-decoration: none;
43 }
44
45 p a:hover {
46     text-decoration: underline;
47 }
48
49 header {
50     display: flex;
51     flex-wrap: wrap;
52 }
53
54 h2,
55 .indicator {
56     font-size: 5rem;
57     color: #9B9B9B;
58     font-weight: 500;
59     line-height: 1.25;
60     margin: 0;
61 }
62
63 p {
64     color: #ffffff;
65     font-size: 1.8rem;
66     margin-bottom: 3rem;
67     opacity: 0;
68     animation: fade-in 1s ease-in 200ms forwards;
69 }
70
71 .about h2 {
72     margin-top: 3rem;
73 }
74
75 .logo {
76     width: 33rem;
77     height: auto;
78     white-space: nowrap;
79     overflow: hidden;
80     margin: 1px 1rem 1px 0;
81     font-size: 0;
82
83     opacity: 0;
84     animation: scale-in 1100ms ease-out 0ms forwards;
85 }
86
87 .start {
88     flex: 1;
89     display: block;
90     position: relative;
91     background-color: transparent;
92     border: 5px solid #E7B135;
93     font-size: 2.4rem;
94     line-height: 5.4rem;
95     font-weight: 600;
96     text-transform: uppercase;
97     color: #E7B135;
98
99     opacity: 0;
100     animation: flicker-in 500ms ease-out 1s forwards;
101
102 }
103
104 .start.ready {
105     transition: background 0.2s ease-out, color 0.2s ease-out;
106     cursor: pointer;
107 }
108
109 .start.ready:hover {
110     background-color: #E7B135;
111     color: #2C2C3C;
112 }
113
114 .start:after {
115     content: '';
116     display: block;
117     position: absolute;
118     right: 0;
119     top: 0;
120     width: 0;
121     height: 0;
122     border-top: 3rem solid #E7B135;
123     border-right: 0 solid transparent;
124     border-bottom: 0 solid transparent;
125     border-left: 3rem solid transparent;
126 }
127
128 .start.ready .testrun {
129     opacity: 0;
130 }
131
132 .tests {
133     display: flex;
134     flex-wrap: wrap;
135     justify-content: space-around;
136 }
137
138 .test {
139     position: relative;
140     flex: 1;
141     border-bottom: 1px solid #979797;
142     margin-right: 1rem;
143     margin-bottom: 3rem;
144     opacity: 0;
145     animation: fade-in 1s ease-out 700ms forwards;
146     min-width: 40%;
147 }
148
149 .test:nth-child(odd) {
150     animation-delay: 900ms;
151 }
152
153 .overall h2,
154 .test h2 {
155     border-bottom: 1px solid #979797;
156 }
157
158 .test .indicator {
159     color: #E7B135;
160     opacity: 0;
161
162     position: absolute;
163     left: -1.2rem;
164 }
165
166 .test .indicator.running {
167     animation: test-running 1s;
168 }
169
170 @keyframes test-running {
171   0%   { opacity: 0; }
172   100%  { opacity: 1; }
173 }
174
175 .score {
176     color: #E7B135;
177     margin: 1rem 0;
178     position: relative;
179 }
180
181 .score label {
182     text-transform: uppercase;
183     letter-spacing: 0.02rem;
184     font-weight: 500;
185     display: block;
186     line-height: 1;
187 }
188
189 .score .value {
190     font-size: 6.4rem;
191     font-weight: 600;
192
193     line-height: 1;
194     white-space: nowrap;
195 }
196
197 .score .units {
198     font-size: 4rem;
199     font-weight: 600;
200
201 }
202
203 .score .margin {
204     color: #9B9B9B;
205     position: absolute;
206     font-size: 2rem;
207     top: 2rem;
208     margin-left: 0.2rem;
209 }
210
211 .overall {
212     margin-bottom: 3rem;
213     opacity: 0;
214     animation: fade-in 1s ease-out 500ms forwards;
215 }
216
217 .overall .score  {
218     color: #ffffff;
219 }
220
221 .overall .margin  {
222     top: 0.5rem;
223 }
224
225 .about h2 {
226     margin-top: 3rem;
227     opacity: 0;
228     animation: fade-in 1s ease-out 500ms forwards;
229 }
230
231 .button {
232     display: inline-block;
233     position: relative;
234     border: 5px solid #E7B135;
235     padding: 1rem 3rem;
236     text-transform: uppercase;
237     font-weight: bold;
238     transition: background 0.2s ease-out, color 0.2s ease-out;
239 }
240
241 .button:hover {
242     background-color: #E7B135;
243     color: #2C2C3C;
244     text-decoration: none;
245 }
246
247 .button.return:before {
248     content: '';
249     display: block;
250     position: absolute;
251     left: 0;
252     top: 0;
253     width: 0;
254     height: 0;
255     border-top: 2rem solid #E7B135;
256     border-right: 2rem solid transparent;
257     border-bottom: 0 solid transparent;
258     border-left: 0 solid transparent;
259 }
260
261 @keyframes fade-in {
262   0%   { opacity: 0; }
263   100% { opacity: 1; }
264 }
265
266 @keyframes scale-in {
267   0%   { opacity: 0; transform: scale(0.8); }
268   100% { opacity: 1; transform: scale(1); }
269 }
270
271 @keyframes flicker-in {
272   0%   { opacity: 0; }
273   30%  { opacity: 0.3; }
274   40%  { opacity: 0; }
275   50%  { opacity: 0.1; }
276   60%  { opacity: 0; }
277   70%  { opacity: 0.4; }
278   80%  { opacity: 0; }
279   100% { opacity: 1; }
280 }
281
282 @keyframes wipe-in {
283   0%   { width: 0; }
284   100%  { width: 100vw; }
285 }
286
287 @media only screen and (max-width: 784px) {
288     .logo {
289         width: 100%;
290         margin-bottom: 1rem;
291         margin: 0 0 1rem 0;
292     }
293     .start {
294         width: 100%;
295     }
296
297     .test {
298         flex: none;
299
300         width: 100%;
301     }
302 }