Websites/browserbench.org/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 .running {
 159     color: #ffffff;
 160 }
 161
 162 .test .running:before {
 163     content: '\25b8';
 164 }
 165
 166 .score {
 167     color: #E7B135;
 168     margin: 1rem 0;
 169     position: relative;
 170 }
 171
 172 .score label {
 173     text-transform: uppercase;
 174     letter-spacing: 0.02rem;
 175     font-weight: 500;
 176     display: block;
 177     line-height: 1;
 178 }
 179
 180 .score .value {
 181     font-size: 6.4rem;
 182     font-weight: 600;
 183
 184     line-height: 1;
 185     white-space: nowrap;
 186 }
 187
 188 .score .units {
 189     font-size: 4rem;
 190     font-weight: 600;
 191
 192 }
 193
 194 .score .margin {
 195     color: #9B9B9B;
 196     position: absolute;
 197     font-size: 2rem;
 198     top: 2rem;
 199     margin-left: 0.2rem;
 200 }
 201
 202 .overall {
 203     margin-bottom: 3rem;
 204     opacity: 0;
 205     animation: fade-in 1s ease-out 500ms forwards;
 206 }
 207
 208 .overall .score  {
 209     color: #ffffff;
 210 }
 211
 212 .overall .margin  {
 213     top: 0.5rem;
 214 }
 215
 216 .about h2 {
 217     margin-top: 3rem;
 218     opacity: 0;
 219     animation: fade-in 1s ease-out 500ms forwards;
 220 }
 221
 222 .button {
 223     display: inline-block;
 224     position: relative;
 225     border: 5px solid #E7B135;
 226     padding: 1rem 3rem;
 227     text-transform: uppercase;
 228     font-weight: bold;
 229     transition: background 0.2s ease-out, color 0.2s ease-out;
 230 }
 231
 232 .button:hover {
 233     background-color: #E7B135;
 234     color: #2C2C3C;
 235     text-decoration: none;
 236 }
 237
 238 .button.return:before {
 239     content: '';
 240     display: block;
 241     position: absolute;
 242     left: 0;
 243     top: 0;
 244     width: 0;
 245     height: 0;
 246     border-top: 2rem solid #E7B135;
 247     border-right: 2rem solid transparent;
 248     border-bottom: 0 solid transparent;
 249     border-left: 0 solid transparent;
 250 }
 251
 252 @keyframes fade-in {
 253   0%   { opacity: 0; }
 254   100% { opacity: 1; }
 255 }
 256
 257 @keyframes scale-in {
 258   0%   { opacity: 0; transform: scale(0.8); }
 259   100% { opacity: 1; transform: scale(1); }
 260 }
 261
 262 @keyframes flicker-in {
 263   0%   { opacity: 0; }
 264   30%  { opacity: 0.3; }
 265   40%  { opacity: 0; }
 266   50%  { opacity: 0.1; }
 267   60%  { opacity: 0; }
 268   70%  { opacity: 0.4; }
 269   80%  { opacity: 0; }
 270   100% { opacity: 1; }
 271 }
 272
 273 @keyframes wipe-in {
 274   0%   { width: 0; }
 275   100%  { width: 100vw; }
 276 }
 277
 278 @media only screen and (max-width: 784px) {
 279     .logo {
 280         width: 100%;
 281         margin-bottom: 1rem;
 282         margin: 0 0 1rem 0;
 283     }
 284     .start {
 285         width: 100%;
 286     }
 287
 288     .test {
 289         flex: none;
 290
 291         width: 100%;
 292     }
 293 }