v7/css/master.css

   1 html {
   2     text-rendering: optimizeLegibility !important;
   3     -webkit-font-smoothing: antialiased !important;
   4 }
   5
   6 /*Bootstrap overrides*/
   7 .navbar {
   8   margin-bottom: 0;
   9   border: 0;
  10   border-radius: 0;
  11   background: #2caf8f;
  12 }
  13
  14 .navbar-header {
  15   border: 0;
  16   background: #2caf8f;
  17   box-shadow: none;
  18 }
  19
  20 .navbar-toggle {
  21   border: 0;
  22 }
  23
  24 .navbar-brand {
  25   padding-top: 10px;
  26 }
  27
  28 .navbar-default .navbar-toggle .icon-bar {
  29   width: 40px;
  30   height: 5px;
  31   border-radius: 6px;
  32   background-color: #ffd429;
  33 }
  34
  35 .navbar-default .navbar-toggle:focus,
  36 .navbar-default .navbar-toggle:hover {
  37   background-color: transparent;
  38 }
  39
  40 .navbar-default .navbar-collapse,
  41 .navbar-default .navbar-form {
  42   border: 0;
  43 }
  44
  45 .navbar-collapse {
  46   background: #2caf8f;
  47 }
  48
  49 .navbar-default .navbar-nav > li > a {
  50   color: white;
  51 }
  52
  53 .alert-link {
  54   color: #ffd429 !important;
  55 }
  56
  57 .alert-link:hover {
  58   color: white !important;
  59 }
  60
  61 .alert {
  62   margin-top: 20px;
  63   max-width: 700px;
  64   border: 0;
  65 }
  66
  67 .alert-success {
  68   background: #2caf8f;
  69
  70 }
  71
  72 .alert-success p {
  73   color: #E8FBF2 !important;
  74   color: rgba(255,255,255,0.9) !important;
  75 }
  76
  77 .alert-info {
  78   background: #6eadf5;
  79   color: #F1F7FE;
  80   color: rgba(255,255,255,0.9);
  81 }
  82
  83
  84 .panel-body {
  85   padding: 0;
  86 }
  87
  88 /*Typography*/
  89 @font-face {
  90   font-weight: 400;
  91   font-style: normal;
  92   font-family: "Open Sans";
  93     src: url('../fonts/opensans-regular-webfont-webfont.svg#open_sansregular') format('svg');
  94   src: url("../fonts/opensans-regular-webfont.eot");
  95   src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype');
  96 }
  97 @font-face {
  98   font-weight: 700;
  99   font-style: normal;
 100   font-family: "Open Sans Bold";
 101   src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
 102   src: url("../fonts/opensans-bold-webfont.eot");
 103   src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype');
 104 }
 105 @font-face {
 106   font-weight: 600;
 107   font-style: normal;
 108   font-family: "Signika Bold";
 109   src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
 110   src: url("../fonts/signika-bold-webfont.eot");
 111   src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype');
 112 }
 113 @font-face {
 114   font-weight: 100;
 115   font-style: normal;
 116   font-family: "Signika Light";
 117   src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
 118   src: url("../fonts/signika-light-webfont.eot");
 119   src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype');
 120 }
 121 @font-face {
 122   font-weight: 400;
 123   font-style: normal;
 124   font-family: "Signika Regular";
 125   src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
 126   src: url("../fonts/signika-regular-webfont.eot");
 127   src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype');
 128 }
 129
 130 /*Text Styles*/
 131
 132 h1 {
 133   margin-bottom: 20px;
 134   color: #4B423B;
 135   font-size: 35px;
 136   font-family: "Signika Light";
 137 }
 138
 139 h2 {
 140   color: #4B423B;
 141   font-size: 28px;
 142   font-family: "Signika Light";
 143 }
 144
 145 h3 {
 146   color: #333;
 147   font-size: 25px;
 148   font-family: "Signika Regular";
 149 }
 150
 151 h4 {
 152   color: #9b9b9b;
 153   font-size: 24px;
 154   font-family: "Signika Light";
 155 }
 156
 157 h5 {
 158   color: #4a4a4a;
 159   font-size: 20px;
 160   font-family: "Signika Regular";
 161 }
 162
 163 li,
 164 p {
 165   margin-bottom: 20px;
 166   color: #1c1c1c;
 167   list-style: outside;
 168   font-size: 17px;
 169   font-family: "Open Sans";
 170   line-height: 30px;
 171 }
 172
 173 li {
 174   margin-bottom: 20px;
 175   list-style-type: disc;
 176 }
 177
 178 a {
 179   border-bottom: 2px solid #ffd429;
 180   color: #2caf8f;
 181   text-decoration: none;
 182   transition: .3s all ease;
 183 }
 184
 185 a:hover {
 186   color: #0f4639;
 187   text-decoration: none;
 188 }
 189
 190 section {
 191   padding-top: 30px;
 192   padding-bottom: 30px;
 193 }
 194
 195 /*Header*/
 196
 197 /*Navbar*/
 198
 199 .icon-bar {
 200   transition: .3s all ease;
 201 }
 202
 203 .bar2 {
 204   width: 30px !important;
 205 }
 206
 207 .bar3 {
 208   width: 25px !important;
 209 }
 210
 211 .navbar-toggle:hover .bar1 {
 212   width: 42px !important;
 213 }
 214
 215 .navbar-toggle:hover .bar2 {
 216   width: 25px !important;
 217 }
 218
 219 .navbar-toggle:hover .bar3 {
 220   width: 15px !important;
 221 }
 222
 223 .navbar li {
 224   padding-top: 20px;
 225   color: #9b9b9b;
 226   text-align: center;
 227   font-size: 30px;
 228   font-family: "Signika Regular";
 229 }
 230
 231 .navbar-brand {
 232   border-bottom: 0;
 233 }
 234
 235 .navbar-nav li a {
 236   border-bottom: 0;
 237 }
 238
 239 /*Intro*/
 240
 241 .intro,
 242 .intro-text {
 243   padding-top: 20px;
 244   padding-bottom: 0;
 245   background: #2caf8f;
 246 }
 247
 248 .intro-text h1 {
 249   color: #2caf8f;
 250 }
 251
 252 .illustration {
 253   padding-bottom: 60px;
 254 }
 255
 256 .intro-text {
 257   padding-bottom: 40px;
 258   background: #fff;
 259 }
 260
 261 /*Actions*/
 262
 263 .actions {
 264   background: #fffae5;
 265 }
 266
 267 .action {
 268   position: relative;
 269         padding-top: 30px;
 270         padding-bottom: 30px;
 271 }
 272
 273 .action-button {
 274   position: relative;
 275   bottom: 10px;
 276   margin-bottom: 30px;
 277   padding: 6px 35px;
 278   border: 0;
 279   border-bottom: 0;
 280   border-radius: 100px;
 281   background: #FFD429;
 282   color: #4B423B;
 283   font-size: 22px;
 284   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
 285   font-family: "Signika Regular";
 286 }
 287
 288 .action-button:hover {
 289   background: #2caf8f;
 290   color: white;
 291 }
 292
 293 .actions p {
 294           font-size: 15px;
 295     color: #8a6d3b;
 296 }
 297
 298 /*Comparisons*/
 299
 300 .title {
 301   margin-top: 40px;
 302   padding-bottom: 8px;
 303   background-image: url("../img/underline.svg");
 304   background-position: center bottom;
 305   background-repeat: no-repeat;
 306 }
 307
 308 .sale {
 309   /*display: none; */ /* uncomment when needed*/
 310   position: absolute;
 311   top: -10%;
 312   right: -20%;
 313   padding: 1px 10px;
 314   border-radius: 100px;
 315   background-color: #0AD778;
 316   color: white;
 317   text-transform: uppercase;
 318   font-size: 15px;
 319   font-family: "Open Sans";
 320 }
 321
 322 .sale-info {
 323     font-size: 15px;
 324     color: gray;
 325 }
 326
 327 .links {
 328   margin-top: -20px;
 329   margin-bottom: 40px;
 330 }
 331
 332 .bad,
 333 .good {
 334   overflow: hidden;
 335   margin-top: 30px;
 336   padding-top: 30px;
 337   padding-bottom: 30px;
 338 }
 339
 340 .bad {
 341   background-color: transparent;
 342   background-image: url("../img/bad-pattern.png");
 343   background-size: 40px;
 344   background-repeat: repeat;
 345 }
 346
 347 .pros li {
 348   background-image: url("../img/good.svg");
 349 }
 350
 351 .cons li {
 352   background-image: url("../img/bad.svg");
 353 }
 354
 355 li.neutral {
 356   background-image: url("../img/neutral.svg");
 357 }
 358
 359 .cons,
 360 .pros {
 361   padding-left: 15px;
 362 }
 363
 364 .cons li,
 365 .pros li,
 366 .info {
 367   padding-left: 30px;
 368   background-position: top left;
 369   background-repeat: no-repeat;
 370   list-style: none;
 371 }
 372
 373 .bad img,
 374 .good img,
 375 .recommended-img img {
 376   margin-bottom: 20px;
 377   width: 250px;
 378   height: 250px;
 379 }
 380
 381 .get-item {
 382   position: absolute;
 383   top: 250px;
 384   right: 50%;
 385   left: 50%;
 386   margin-left: -60px;
 387   padding: 5px;
 388   width: 120px;
 389   border-bottom: 0;
 390   border-radius: 100px;
 391   background: #2B81E3;
 392   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
 393   color: white;
 394   vertical-align: middle;
 395   text-align: center;
 396   text-decoration: none;
 397   font-size: 21px;
 398   font-family: "Signika Regular";
 399 }
 400
 401 .get-item:active,
 402 .get-item:focus,
 403 .get-item:hover {
 404   background: #6eadf5;
 405   color: white;
 406   text-decoration: none;
 407 }
 408
 409 .get-item:active {
 410   background: #2B81E3;
 411 }
 412
 413 .seller-group {
 414   padding: 15px;
 415   text-align: center;
 416   transition: all 0.3s ease;
 417 }
 418
 419 .seller {
 420   min-width: 150px;
 421   max-width: 200px;
 422   display: block;
 423   margin: 20px auto;
 424   text-align: center;
 425 }
 426
 427 .info {
 428    margin-bottom: 0;
 429   background-image: url("../img/info.svg");
 430    background-position: center left;
 431
 432 }
 433
 434 .info p {
 435   margin-bottom: 0;
 436 }
 437
 438 /*Recommended Lines*/
 439
 440 .recommended-section {
 441   margin-top: 20px;
 442   margin-bottom: 20px;
 443   padding-top: 30px;
 444   padding-bottom: 30px;
 445   background: #F5FFF7;
 446 }
 447
 448 /*Charities*/
 449 .charities {
 450   margin-bottom: 0;
 451   background-color: #F5FFF7;
 452 }
 453
 454 /*Promotion details*/
 455 .promotion-details {
 456   margin-bottom: 0;
 457   background-color: #fffae5;
 458 }
 459
 460 .promotion-details .panel-default .panel-heading {
 461   border: 0;
 462   background-color: #fffae5;
 463   box-shadow: 0 0 0 transparent;
 464 }
 465
 466 /*Licenses*/
 467 .licenses {
 468   margin-bottom: 0;
 469   background-color: #F5FFF7;
 470 }
 471
 472 .licenses .panel-default .panel-heading {
 473   border: 0;
 474   background-color: #F5FFF7;
 475   box-shadow: 0 0 0 transparent;
 476 }
 477
 478 .fix-margin {
 479   margin: 0;
 480 }
 481
 482 /*Footer*/
 483 footer {
 484   padding-top: 30px;
 485   background-color: #4B423B;
 486 }
 487
 488 footer p {
 489   color: #cdcac8;
 490   color: rgba(255,255,255,0.72);
 491 }
 492
 493 footer a {
 494   color: #FFD429;
 495   font-weight: 700;
 496 }
 497
 498 footer a:hover {
 499   color: white;
 500 }
 501
 502 .footer-logo {
 503   margin-bottom: 15px;
 504   max-height: 150px;
 505 }
 506
 507 /* Media Queries */
 508
 509 /*Smallest devices*/
 510 /*@media (max-width: 350px) {
 511   .seller {
 512     display: block;
 513     margin: 20px auto;
 514   }
 515 }*/
 516
 517 /* Small devices (tablets, 768px and up) */
 518 @media (min-width: 768px) {
 519   /*Navbar*/
 520   .navbar-nav {
 521     float: right;
 522     margin: 10px;
 523     /*margin-left: 100px;*/
 524   }
 525
 526   .navbar-default .navbar-nav > li > a {
 527     padding: 7px;
 528     color: #2caf8f;
 529   }
 530
 531   .navbar li {
 532     padding: 0 25px;
 533     border-right: 1px #9BD2BF solid;
 534     background-color: white;
 535     list-style-type: none;
 536     font-size: 1.1em;
 537     font-family: "Signika Regular";
 538     transition: .3s all ease;
 539   }
 540
 541   .navbar li:first-child {
 542     border-radius: 100px 0 0 100px;
 543   }
 544
 545   .navbar li:last-child {
 546     border-right: 0;
 547     border-radius: 0 100px 100px 0;
 548   }
 549
 550   .navbar li:hover {
 551     background-color: #FFDD55;
 552   }
 553
 554   .navbar li a {
 555     display: block;
 556     text-decoration: none;
 557     transition: .3s all ease;
 558   }
 559
 560   .navbar li a:hover {
 561     color: #4B423B;
 562   }
 563
 564   .intro {
 565     margin-bottom: 0;
 566   }
 567
 568   .join {
 569     display: none;
 570   }
 571
 572   .is-table-row {
 573        display: table;
 574    }
 575   .is-table-row [class*="col-"] {
 576        display: table-cell;
 577        float: none;
 578        vertical-align: top;
 579    }
 580
 581    .title {
 582      margin-bottom: 30px;
 583    }
 584
 585   .recommended-section h5 {
 586     padding-left: 46px;
 587     text-align: left;
 588   }
 589
 590   .charities img {
 591     width: 80%;
 592     filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
 593     transition: .3s all ease;
 594   }
 595
 596   .charities img:hover {
 597     filter: brightness(1) contrast(100%) opacity(1) saturate(1);
 598     transform: scale(1.1);
 599   }
 600
 601   /*Footer*/
 602   .footer-logo {
 603     margin-bottom: 0;
 604   }
 605
 606   .footer-logo img {
 607     width: 85%;
 608   }
 609 }
 610 /* Medium devices (desktops, 992px and up) */
 611 @media (min-width: 992px) {
 612   /*Navbar*/
 613   .navbar-nav {
 614     margin: 10px 10px 10px 100px;
 615   }
 616
 617   .navbar-default .navbar-nav > li > a {
 618     padding: 7px;
 619     color: #2caf8f;
 620   }
 621
 622   .navbar li {
 623     padding: 0 30px;
 624     border-right: 1px #9BD2BF solid;
 625     background-color: white;
 626     list-style-type: none;
 627     font-size: 1.2em;
 628     font-family: "Signika Regular";
 629     transition: .3s all ease;
 630   }
 631
 632   .navbar li:first-child {
 633     border-radius: 100px 0 0 100px;
 634   }
 635
 636   .navbar li:last-child {
 637     border-right: 0;
 638     border-radius: 0 100px 100px 0;
 639   }
 640
 641   .navbar li:hover {
 642     background-color: #FFDD55;
 643   }
 644
 645   .navbar li a {
 646     display: block;
 647     text-decoration: none;
 648     transition: .3s all ease;
 649   }
 650
 651   .navbar li:hover a {
 652     color: #4B423B;
 653   }
 654
 655   .join {
 656     display: block;
 657   }
 658
 659   .join img {
 660     margin: 10px;
 661     width: 200px;
 662   }
 663   /*Intro*/
 664   .intro {
 665     margin-bottom: 0;
 666   }
 667
 668   .intro-text {
 669     background: transparent;
 670   }
 671
 672   .intro-text h1 {
 673     margin-top: 0;
 674     color: white;
 675     color: rgba(255, 255, 255, 0.95);
 676   }
 677
 678   .intro-text p {
 679     color: rgba(255, 255, 255, 0.79);
 680   }
 681
 682   .intro-text h4 {
 683     color: #FFDD55;
 684     font-family: "Signika Light";
 685   }
 686
 687   .illustration img {
 688     margin-top: 30px;
 689     width: 90%;
 690   }
 691   /*Footer*/
 692   .footer-logo img {
 693     width: 50%;
 694   }
 695 }
 696 /* Large devices (large desktops, 1200px and up) */
 697 @media (min-width: 1200px) {
 698   .illustration img {
 699     margin-top: 10px;
 700     width: 70%;
 701   }
 702
 703 }