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