App.scss 11.7 KB
Newer Older
Eugen Rochko's avatar
Eugen Rochko committed
1 2
@import './variables.scss';

Morgan Nichols's avatar
Morgan Nichols committed
3 4 5
$transition-in: 100ms linear;
$transition-out: 250ms linear;

6 7
$content-width: 800px;
$screenshotScale: 0.9;
8 9 10

$phi: 1.6180339887498948482;

Eugen Rochko's avatar
Eugen Rochko committed
11
.app {
12 13
  font-size: 16px;
  line-height: 30px;
Eugen Rochko's avatar
Eugen Rochko committed
14 15 16
}

.container {
17
  max-width: $content-width;
Eugen Rochko's avatar
Eugen Rochko committed
18 19 20 21
  margin: 0 auto;
}

.navbar {
Eugen Rochko's avatar
Eugen Rochko committed
22
  margin-bottom: 90px;
Eugen Rochko's avatar
Eugen Rochko committed
23 24
  display: flex;
  justify-content: space-between;
25

Eugen Rochko's avatar
Eugen Rochko committed
26 27 28 29 30 31 32 33 34
  ul {
    list-style: none;

    li {
      display: inline-block;
      vertical-align: bottom;
    }

    a {
35
      display: flex;
36
      justify-content: center;
37 38
      align-items: center;

39
      color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
40
      text-decoration: none;
Eugen Rochko's avatar
Eugen Rochko committed
41
      padding: 12px 14px;
Eugen Rochko's avatar
Eugen Rochko committed
42
      line-height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
43 44
      transition: color $transition-out;
      font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
45
      font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
46 47
      font-size: 14px;

48 49 50 51
      .lang-it & {
        padding: 12px 10px;
      }

52 53 54
      img.link-logo {
        width: 32px;
        height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
55 56
        opacity: 0.8;
        mix-blend-mode: overlay;
Morgan Nichols's avatar
Morgan Nichols committed
57
        transition: opacity $transition-out;
58 59 60 61 62 63 64 65 66 67 68

        &.before {
          margin-right: 10px;
        }

        &.after {
          margin-left: 10px;
        }
      }

      &.active, &:hover {
69
        color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
70
        transition: color $transition-in;
71 72

        img.link-logo {
Eugen Rochko's avatar
Eugen Rochko committed
73
          opacity: 1;
Morgan Nichols's avatar
Morgan Nichols committed
74
          transition: opacity $transition-in;
75
        }
Eugen Rochko's avatar
Eugen Rochko committed
76
      }
Eugen Rochko's avatar
Eugen Rochko committed
77 78

      &.brand {
Eugen Rochko's avatar
Eugen Rochko committed
79
        color: $white;
Eugen Rochko's avatar
Eugen Rochko committed
80 81

        img {
82 83
          width: auto;
          height: 32px;
Eugen Rochko's avatar
Eugen Rochko committed
84
          opacity: 1;
85
          position: relative;
Eugen Rochko's avatar
Eugen Rochko committed
86
          mix-blend-mode: normal;
87 88
          top: 4px;
          left: -10px;
Eugen Rochko's avatar
Eugen Rochko committed
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
        }

        &:hover {
          border-bottom-color: transparent;

          img {
            opacity: 1;
          }
        }
      }
    }

    li:first-child a {
      padding-left: 0;
    }

    li:last-child a {
      padding-right: 0;
Eugen Rochko's avatar
Eugen Rochko committed
107 108 109 110
    }
  }
}

111
.cta {
Morgan Nichols's avatar
Morgan Nichols committed
112
  display: inline-block;
113
  text-align: center;
Eugen Rochko's avatar
Eugen Rochko committed
114
  font-size: 16px;
115 116
  text-decoration: none;
  line-height: 36px;
Eugen Rochko's avatar
Eugen Rochko committed
117
  padding: 4px 16px;
118
  margin-bottom: 10px;
119 120 121
  background: transparent;
  border: 0;
  cursor: pointer;
122 123

  &.button {
Eugen Rochko's avatar
Eugen Rochko committed
124
    font-weight: 500;
125 126 127
    color: $darkest;
    background: $lighter;
    border-radius: 4px;
Eugen Rochko's avatar
Eugen Rochko committed
128
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Eugen Rochko's avatar
Eugen Rochko committed
129
    margin-right: 4px;
Eugen Rochko's avatar
Eugen Rochko committed
130
    font-family: inherit;
131 132

    &:hover {
Eugen Rochko's avatar
Eugen Rochko committed
133 134 135 136 137 138 139 140 141 142 143 144 145
      background-color: lighten($lighter, 8%);
    }

    &.alt {
      background: transparent;
      border: 1px solid $lighter;
      padding: 3px 15px;
      color: $lighter;

      &:hover {
        color: lighten($lighter, 8%);
        border-color: lighten($lighter, 8%);
      }
146 147 148 149 150
    }
  }

  &.secondary {
    color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
151 152
    padding-left: 0;
    padding-right: 0;
Morgan Nichols's avatar
Morgan Nichols committed
153

154 155 156
    &:hover {
      color: $lightest;
    }
Morgan Nichols's avatar
Morgan Nichols committed
157
  }
158 159
}

160 161 162 163 164 165
.cta-secondary {
  font-size: 18px;
  line-height: 36px;
  padding: 6px 16px;
}

Eugen Rochko's avatar
Eugen Rochko committed
166 167
.intro {
  text-align: center;
Eugen Rochko's avatar
Eugen Rochko committed
168 169 170 171
  padding-top: 15px;
  overflow: hidden;
  background: lighten($darkest, 4%);
  background: linear-gradient(150deg, lighten($darkest, 10%), lighten($darkest, 4%));
172
  color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
173

174
  .text {
175
    width: $content-width;
176 177 178
    margin: 0 auto;
  }

Eugen Rochko's avatar
Eugen Rochko committed
179
  h1 {
Eugen Rochko's avatar
Eugen Rochko committed
180
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
181
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
182 183
    font-size: 26px;
    margin-bottom: 20px;
Eugen Rochko's avatar
Eugen Rochko committed
184

Eugen Rochko's avatar
Eugen Rochko committed
185
    strong {
186
      color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
187
    }
Eugen Rochko's avatar
Eugen Rochko committed
188 189
  }

Eugen Rochko's avatar
Eugen Rochko committed
190
  p {
191
    color: $lighter;
Eugen Rochko's avatar
Eugen Rochko committed
192 193
    font-size: 18px;
    margin-bottom: 26px;
Eugen Rochko's avatar
Eugen Rochko committed
194
  }
195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217

  .cta.button:not(.alt) {
    background: lighten($vibrant, 4%);
    color: #fff;

    &:hover,
    &:focus,
    &:active {
      background: lighten($vibrant, 8%);
    }
  }

  .cta.button.alt {
    border-color: lighten($vibrant, 4%);
    color: lighten($vibrant, 4%);

    &:hover,
    &:focus,
    &:active {
      border-color: lighten($vibrant, 8%);
      color: lighten($vibrant, 8%);
    }
  }
Morgan Nichols's avatar
Morgan Nichols committed
218
}
Eugen Rochko's avatar
Eugen Rochko committed
219

Morgan Nichols's avatar
Morgan Nichols committed
220 221
.hero {
  position: relative;
222 223
  margin: 30px auto;
  padding-bottom: 15px;
224
  width: $content-width;
Eugen Rochko's avatar
Eugen Rochko committed
225
  height: 330px;
Morgan Nichols's avatar
Morgan Nichols committed
226 227

  img {
228
    position: absolute;
Morgan Nichols's avatar
Morgan Nichols committed
229 230 231 232 233 234
    display: block;
    border-radius: 4px;
    box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.2);
  }

  .desktop {
235
    max-width: $content-width * $screenshotScale;
236
    top: 0;
237
    left: 0;
Eugen Rochko's avatar
Eugen Rochko committed
238
  }
Eugen Rochko's avatar
Eugen Rochko committed
239

Morgan Nichols's avatar
Morgan Nichols committed
240
  .mobile {
241 242 243
    max-width: ($content-width / 4) * $screenshotScale;
    top: 90px;
    right: 0;
244
  }
Eugen Rochko's avatar
Eugen Rochko committed
245

Morgan Nichols's avatar
Morgan Nichols committed
246
  .logo {
247
    width: 150px;
Morgan Nichols's avatar
Morgan Nichols committed
248 249
    left: 0;
    right: 0;
250
    bottom: -75px;
Morgan Nichols's avatar
Morgan Nichols committed
251
    margin: auto;
Eugen Rochko's avatar
Eugen Rochko committed
252 253 254 255
    background: $darkest;
    padding: 10px;
    border-radius: 85px;
    box-shadow: none;
Eugen Rochko's avatar
Eugen Rochko committed
256
  }
257
}
Eugen Rochko's avatar
Eugen Rochko committed
258

259
.as-seen-on, .frontpage-sponsorship {
Eugen Rochko's avatar
Eugen Rochko committed
260 261 262 263
  background: darken($darkest, 4%);
  padding: 30px 0;
  padding-bottom: 50px;

264
  h2 {
Eugen Rochko's avatar
Eugen Rochko committed
265
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
266
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
267
    font-size: 16px;
268
    color: lighten($darkest, 40%);
Eugen Rochko's avatar
Eugen Rochko committed
269 270 271 272 273 274 275 276 277 278
    text-align: center;
    margin-bottom: 20px;
  }

  .logo-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

Eugen Rochko's avatar
Eugen Rochko committed
279 280 281 282 283 284 285
    & > div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }

Eugen Rochko's avatar
Eugen Rochko committed
286 287 288 289 290 291 292 293
    a {
      display: inline-block;
      text-decoration: none;
      padding: 0 10px;

      img {
        display: block;
        margin: 0;
Eugen Rochko's avatar
Eugen Rochko committed
294 295
        height: 28px;
        width: auto;
Eugen Rochko's avatar
Eugen Rochko committed
296
        opacity: 0.5;
297 298
        transition: all $transition-in;
        filter: grayscale(100%);
Eugen Rochko's avatar
Eugen Rochko committed
299 300 301 302 303
      }

      &:hover {
        img {
          opacity: 0.8;
304 305
          transition: all $transition-out;
          filter: grayscale(0%);
Eugen Rochko's avatar
Eugen Rochko committed
306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322
        }
      }
    }
  }

  .logo-product-hunt {
    padding: 0;
  }

  .logo-the-verge {

  }

  .logo-wired {

  }

Eugen Rochko's avatar
Eugen Rochko committed
323 324 325 326
  .logo-motherboard img {
    height: 27px !important;
    position: relative;
    top: -2px;
Eugen Rochko's avatar
Eugen Rochko committed
327 328 329
  }
}

330 331 332 333 334 335
.frontpage-sponsorship {
  .logo-grid a {
    padding: 0 20px;
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
.brand {
  display: inline-block;
  position: relative;
  z-index: 2;

  &::before {
    content: "";
    display: block;
    background: url('assets/elephant-friend-top.png');
    position: absolute;
    width: 393px;
    height: 176px;
    z-index: -1;
    top: -21px;
    left: -28px;
Eugen Rochko's avatar
Eugen Rochko committed
351
    pointer-events: none;
Eugen Rochko's avatar
Eugen Rochko committed
352 353 354 355 356 357 358 359 360
  }

  &:hover {
    &::before {
      top: -20px;
    }
  }
}

361 362
.feature {
  display: flex;
363
  margin: 100px auto;
364 365
  align-items: center;
  justify-content: space-between;
Eugen Rochko's avatar
Eugen Rochko committed
366

367 368 369
  .left {
    margin-right: 20px;
    order: 1;
370
    text-align: left;
Eugen Rochko's avatar
Eugen Rochko committed
371 372 373 374

    .lang-ar & {
      text-align: right;
    }
375 376 377 378 379
  }

  .right {
    margin-left: 20px;
    order: 2;
380
    text-align: right;
Eugen Rochko's avatar
Eugen Rochko committed
381 382 383 384

    .lang-ar & {
      text-align: right;
    }
Eugen Rochko's avatar
Eugen Rochko committed
385 386
  }

387
  .text {
388
    width: 80%;
Eugen Rochko's avatar
Eugen Rochko committed
389
    font-size: 16px;
Eugen Rochko's avatar
Eugen Rochko committed
390
    //line-height: 24px;
Eugen Rochko's avatar
Eugen Rochko committed
391 392 393

    strong {
      font-weight: 500;
394
      color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
395
    }
Eugen Rochko's avatar
Eugen Rochko committed
396 397
  }

398
  .visual {
399
    max-width: 20%;
Eugen Rochko's avatar
Eugen Rochko committed
400 401 402 403 404

    i {
      font-size: 128px;
      color: lighten($darkest, 30%);
    }
Eugen Rochko's avatar
Eugen Rochko committed
405 406
  }

Eugen Rochko's avatar
Eugen Rochko committed
407
  h2, h3 {
Eugen Rochko's avatar
Eugen Rochko committed
408
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
409
    font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
410 411
    font-size: 21px;
    margin-bottom: 20px;
412
    color: $lightest;
Eugen Rochko's avatar
Eugen Rochko committed
413
  }
Eugen Rochko's avatar
Eugen Rochko committed
414 415 416 417 418 419 420 421 422

  h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .additional-features {
    width: 100%;

Eugen Rochko's avatar
Eugen Rochko committed
423 424 425 426 427 428 429 430 431
    .lang-ar & {
      direction: rtl;

      li i {
        margin-right: 0;
        margin-left: 10px;
      }
    }

Eugen Rochko's avatar
Eugen Rochko committed
432 433 434 435 436 437 438
    ul {
      columns: 3;
      column-gap: 15px;
    }

    li {
      display: flex;
439 440 441 442 443
      line-height: 1.5em;
      padding-bottom: .5em;
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
Eugen Rochko's avatar
Eugen Rochko committed
444 445 446 447 448 449 450 451 452

      i {
        display: block;
        flex: 0 0 auto;
        margin-right: 10px;
        color: lighten($darkest, 30%);
      }
    }
  }
Eugen Rochko's avatar
Eugen Rochko committed
453
}
Morgan Nichols's avatar
Morgan Nichols committed
454

455 456 457 458 459 460 461 462 463 464
.lang-ja {
  .feature {
    .text {
      strong {
        font-weight: 700;
      }
    }
  }
}

465 466 467 468 469 470 471 472 473 474
.lang-zh {
  .feature {
    .text {
      strong {
        font-weight: 700;
      }
    }
  }
}

475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513
.hero__floats {
  position: absolute;
  width: 100%;
  height: 100%;

  img {
    position: absolute;
    transition: all 0.1s linear;
    animation-name: floating;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    box-shadow: none;
  }

  .float-1 {
    left: -200px;
    top: 100px;
    height: 170px;
  }

  .float-2 {
    right: -30px;
    left: auto;
    top: -90px;
    height: 100px;
    animation-delay: 0.2s;
  }

  .float-3 {
    left: auto;
    right: -240px;
    top: 200px;
    height: 140px;
    animation-delay: 0.1s;
  }
}

Morgan Nichols's avatar
Morgan Nichols committed
514
.bottom-cta {
515
  background: darken($darkest, 4%);
516 517 518
  padding: 50px 0;
  padding-top: 70px;

Eugen Rochko's avatar
Eugen Rochko committed
519 520 521 522
  .lang-ar & {
    direction: rtl;
  }

523 524
  h3 {
    font-family: 'Montserrat', sans-serif;
Eugen Rochko's avatar
Eugen Rochko committed
525
    font-weight: 600;
526 527 528
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
529
    color: $lightest;
530
  }
531 532 533 534

  p {
    margin-bottom: 30px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
535 536 537 538 539 540 541 542 543


  @media only screen and (max-width: 640px) {
    .button {
      box-sizing: border-box;
      margin-right: 0;
      width: 100%;
    }
  }
Morgan Nichols's avatar
Morgan Nichols committed
544
}
545 546

@media only screen and (max-width: $content-width) {
Eugen Rochko's avatar
Eugen Rochko committed
547 548 549 550
  .navbar {
    padding: 0 20px;
  }

Eugen Rochko's avatar
Eugen Rochko committed
551 552 553 554 555
  .bottom-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

556 557
  .frontpage-sponsorship,
  .as-seen-on {
Eugen Rochko's avatar
Eugen Rochko committed
558 559 560 561
    & > .container {
      overflow: hidden;
    }

562
    .logo-grid {
Eugen Rochko's avatar
Eugen Rochko committed
563 564 565
      overflow-x: auto;
      padding-bottom: 30px;
      margin-bottom: -30px;
566

Eugen Rochko's avatar
Eugen Rochko committed
567
      & > div {
568 569 570
        a {
          padding: 10px;
        }
571

572 573 574
        .logo-product-hunt {
          padding: 0;
        }
Eugen Rochko's avatar
Eugen Rochko committed
575 576 577 578 579
      }
    }
  }

  .intro {
580 581 582 583 584 585
    .text {
      width: 90%;
    }

    .hero {
      width: 90%;
Eugen Rochko's avatar
Eugen Rochko committed
586
      height: 190px;
587 588 589
      padding-bottom: 100px;
    }

590 591 592 593
    .hero__floats {
      display: none;
    }

594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613
    .desktop {
      position: relative;
      width: percentage($screenshotScale);
      top: 0;
      left: 0;
    }

    .mobile {
      width: percentage($screenshotScale/4);
      top: percentage($screenshotScale/8);
      right: 0;
    }

    .logo {
      width: percentage($screenshotScale/4);
    }
  }

  .feature {
    display: block;
Eugen Rochko's avatar
Eugen Rochko committed
614
    margin: 60px 0;
615

Eugen Rochko's avatar
Eugen Rochko committed
616
    &:first-child {
Eugen Rochko's avatar
Eugen Rochko committed
617
      margin-top: 60px;
Eugen Rochko's avatar
Eugen Rochko committed
618 619
    }

620
    .left, .right {
Eugen Rochko's avatar
Eugen Rochko committed
621 622 623 624 625
      box-sizing: border-box;
      width: 100%;
      padding: 0 20px;
      margin: 15px auto;
      text-align: left;
626 627
    }

628 629
    .visual {
      display: none;
630
    }
Eugen Rochko's avatar
Eugen Rochko committed
631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659

    .additional-features {
      box-sizing: border-box;
      padding: 0 20px;

      ul {
        columns: 3;
      }
    }
  }
}

@media only screen and (max-width: 740px) {
  .feature {
    .additional-features {
      ul {
        columns: 2;
      }
    }
  }
}

@media only screen and (max-width: 510px) {
  .feature {
    .additional-features {
      ul {
        columns: 1;
      }
    }
660 661
  }
}
662

Eugen Rochko's avatar
Eugen Rochko committed
663 664 665 666 667 668
@media only screen and (max-width: $content-width - 50px) {
  .brand::before {
    display: none;
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
669 670 671 672
.xs-show {
  display: none;
}

Eugen Rochko's avatar
Eugen Rochko committed
673
@media only screen and (max-width: 640px) {
Eugen Rochko's avatar
Eugen Rochko committed
674 675 676 677
  .xs-show {
    display: initial;
  }

Eugen Rochko's avatar
Eugen Rochko committed
678 679 680 681
  .navbar {
    display: block;
    background: $darkest;
    margin-top: -15px;
Eugen Rochko's avatar
Eugen Rochko committed
682 683 684 685 686 687 688

    ul a,
    ul .dropdown__control {
      color: lighten($darkest, 30%) !important;
      padding-left: 7px !important;
      padding-right: 7px !important;
    }
Eugen Rochko's avatar
Eugen Rochko committed
689 690
  }

Eugen Rochko's avatar
Eugen Rochko committed
691 692 693 694
  .link-logo.after {
    display: none;
  }

Eugen Rochko's avatar
Eugen Rochko committed
695 696
  .intro {
    .hero {
Eugen Rochko's avatar
Eugen Rochko committed
697 698
      margin-top: 60px;
      height: 45px;
Eugen Rochko's avatar
Eugen Rochko committed
699 700
    }
  }
701

702 703 704
  .frontpage-sponsorship,
  .as-seen-on {
    .logo-grid {
Eugen Rochko's avatar
Eugen Rochko committed
705
      //
706
    }
Eugen Rochko's avatar
Eugen Rochko committed
707
  }
Eugen Rochko's avatar
Eugen Rochko committed
708 709 710 711

  .feature h2 i {
    margin-right: 10px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
712 713
}

Eugen Rochko's avatar
Eugen Rochko committed
714 715 716 717 718 719 720 721 722
.legal {
  padding-top: 100px;

  &,
  a {
    color: lighten($darkest, 30%);
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
723 724 725 726 727 728 729
@media only screen and (max-width: 460px) {
  .navbar ul li.optional-link {
    display: none;
  }
}

@media only screen and (max-width: 400px) {
730 731 732
  .as-seen-on .logo-grid {
    flex-direction: column;
  }
Eugen Rochko's avatar
Eugen Rochko committed
733 734
}

Eugen Rochko's avatar
Eugen Rochko committed
735 736 737 738 739 740 741 742
@media only screen and (max-width: 380px) {
  .hero {
    display: none;
  }

  .intro {
    padding-bottom: 60px;
  }
Eugen Rochko's avatar
Eugen Rochko committed
743

Eugen Rochko's avatar
Eugen Rochko committed
744 745 746 747 748
  .navbar ul li.optional-link-2 {
    display: none;
  }
}

749 750 751 752 753 754 755 756 757 758 759 760 761
@keyframes floating {
  from {
    transform: translate(0, 0px);
  }

  65% {
    transform: translate(0, 4px);
  }

  to {
    transform: translate(0, -0px);
  }
}
762 763 764 765 766 767 768 769 770

.icon-circled {
  display: inline-block;
  margin-right: 10px;
}

iframe {
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}