@biggive/components 1.0.195 → 1.0.197

package/dist/collection/components/biggive-footer/biggive-footer.css

@@ -1,68 +1,3 @@
-body {
-  background-color: #FFFFFF;
-}
-body.background-primary {
-  background-color: #2C089B;
-}
-body.background-secondary {
-  background-color: #2C089B;
-}
-body.background-tertiary {
-  background-color: #2C089B;
-}
-body.background-brand-1 {
-  background-color: #B30510;
-}
-body.background-brand-2 {
-  background-color: #B30510;
-}
-body.background-brand-3 {
-  background-color: #B30510;
-}
-body.background-brand-4 {
-  background-color: #B30510;
-}
-body.background-brand-5 {
-  background-color: #B30510;
-}
-body.background-brand-6 {
-  background-color: #B30510;
-}
-
-h1, h3, h3, h4, h5, h6 {
-  margin-bottom: 0;
-}
-
-h1, .heading-1 {
-  font-size: 47px;
-  line-height: 60px;
-  font-weight: bold;
-}
-
-h2, .heading-2 {
-  font-size: 38px;
-  line-height: 45px;
-  font-weight: bold;
-}
-
-h3, .heading-3 {
-  font-size: 25px;
-  line-height: 32px;
-  font-weight: bold;
-}
-
-h4, .heading-4 {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
-}
-
-h5, .heading-5 {
-  font-size: 17px;
-  line-height: 24px;
-  font-weight: bold;
-}
-
 a {
   color: inherit;
   text-decoration: underline;
@@ -71,705 +6,6 @@ a:hover {
   text-decoration: none;
 }
 
-.colour-primary {
-  color: #2C089B;
-}
-
-.colour-secondary {
-  color: #2AF135;
-}
-
-.colour-tertiary {
-  color: #FF7272;
-}
-
-.colour-brand-1 {
-  color: #B30510;
-}
-
-.colour-brand-2 {
-  color: #6E0887;
-}
-
-.colour-brand-3 {
-  color: #50B400;
-}
-
-.colour-brand-4 {
-  color: #FFE500;
-}
-
-.colour-brand-5 {
-  color: #F07D00;
-}
-
-.colour-brand-6 {
-  color: #CBC8C8;
-}
-
-.colour-white {
-  color: #FFFFFF;
-}
-
-.colour-black {
-  color: #000000;
-}
-
-.text-colour-hover-primary:hover,
-.text-colour-primary {
-  color: #2C089B;
-}
-
-.text-colour-hover-secondary:hover,
-.text-colour-secondary {
-  color: #2AF135;
-}
-
-.text-colour-hover-tertiary:hover,
-.text-colour-tertiary {
-  color: #FF7272;
-}
-
-.text-colour-hover-brand-1:hover,
-.text-colour-brand-1 {
-  color: #B30510;
-}
-
-.text-colour-hover-brand-2:hover,
-.text-colour-brand-2 {
-  color: #6E0887;
-}
-
-.text-colour-hover-brand-3:hover,
-.text-colour-brand-3 {
-  color: #50B400;
-}
-
-.text-colour-hover-brand-4:hover,
-.text-colour-brand-4 {
-  color: #FFE500;
-}
-
-.text-colour-hover-brand-5:hover,
-.text-colour-brand-5 {
-  color: #F07D00;
-}
-
-.text-colour-hover-brand-6:hover,
-.text-colour-brand-6 {
-  color: #CBC8C8;
-}
-
-.text-colour-hover-white:hover,
-.text-colour-white {
-  color: #FFFFFF;
-}
-
-.text-colour-hover-black:hover,
-.text-colour-black {
-  color: #000000;
-}
-
-.fill-primary {
-  fill: #2C089B;
-}
-
-.fill-secondary {
-  fill: #2AF135;
-}
-
-.fill-tertiary {
-  fill: #FF7272;
-}
-
-.fill-brand-1 {
-  fill: #B30510;
-}
-
-.fill-brand-2 {
-  fill: #6E0887;
-}
-
-.fill-brand-3 {
-  fill: #50B400;
-}
-
-.fill-brand-4 {
-  fill: #FFE500;
-}
-
-.fill-brand-5 {
-  fill: #F07D00;
-}
-
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
-.fill-white {
-  fill: #FFFFFF;
-}
-
-.fill-black {
-  fill: #000000;
-}
-
-.fill-red {
-  fill: red;
-}
-
-.background-colour-hover-primary:hover,
-.background-colour-primary {
-  background-color: #2C089B;
-}
-
-.background-colour-hover-secondary:hover,
-.background-colour-secondary {
-  background-color: #2AF135;
-}
-
-.background-colour-hover-tertiary:hover,
-.background-colour-tertiary {
-  background-color: #FF7272;
-}
-
-.background-colour-hover-brand-1:hover,
-.background-colour-brand-1 {
-  background-color: #B30510;
-}
-
-.background-colour-hover-brand-2:hover,
-.background-colour-brand-2 {
-  background-color: #6E0887;
-}
-
-.background-colour-hover-brand-3:hover,
-.background-colour-brand-3 {
-  background-color: #50B400;
-}
-
-.background-colour-hover-brand-4:hover,
-.background-colour-brand-4 {
-  background-color: #FFE500;
-}
-
-.background-colour-hover-brand-5:hover,
-.background-colour-brand-5 {
-  background-color: #F07D00;
-}
-
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #CBC8C8;
-}
-
-.background-colour-hover-white:hover,
-.background-colour-white {
-  background-color: #FFFFFF;
-}
-
-.background-colour-hover-black:hover,
-.background-colour-black {
-  background-color: #000000;
-}
-
-.background-colour-transparent {
-  background-color: transparent;
-}
-
-.input-wrap {
-  display: flex;
-  justify-content: space-between;
-}
-
-.input-text {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
-  color: #000000;
-  padding: 5px 10px;
-  box-sizing: border-box;
-  width: 100%;
-}
-.input-text:focus {
-  outline: 0;
-}
-.input-text:placeholder {
-  color: #4A4A4A;
-}
-
-.button {
-  font-size: 17px;
-  line-height: 24px;
-  padding: 10px 30px;
-  border-radius: 5px;
-  border: 1px solid #000000;
-  background-color: #000000;
-  color: #FFFFFF;
-  display: inline-block;
-  text-decoration: none;
-  text-align: center;
-  transition: all ease-in-out 0.5s;
-  cursor: pointer;
-}
-.button:hover {
-  background-color: #FFFFFF;
-  color: #000000;
-}
-.button.size-small {
-  font-size: 13px;
-  line-height: 17px;
-  padding: 5px 15px;
-}
-.button.button.rounded-true {
-  border-radius: 27.5px;
-}
-.button.button.rounded-true.size-small {
-  border-radius: 20px;
-}
-
-.button-primary {
-  color: #FFFFFF;
-  background-color: #2C089B;
-  border-color: #2C089B;
-}
-.button-primary:hover {
-  color: #2C089B;
-  background-color: #FFFFFF;
-}
-
-.button-secondary {
-  color: #000000;
-  background-color: #2AF135;
-  border-color: #2AF135;
-}
-.button-secondary:hover {
-  background-color: #FFFFFF;
-  border-color: #000000;
-}
-
-.button-tertiary {
-  color: #FFFFFF;
-  background-color: #FF7272;
-  border-color: #FF7272;
-}
-.button-tertiary:hover {
-  background-color: #FFFFFF;
-}
-
-.button-brand-1 {
-  color: #FFFFFF;
-  background-color: #B30510;
-  border-color: #B30510;
-}
-.button-brand-1:hover {
-  background-color: #FFFFFF;
-}
-
-.button-brand-2 {
-  color: #FFFFFF;
-  background-color: #6E0887;
-  border-color: #6E0887;
-}
-.button-brand-2:hover {
-  background-color: #FFFFFF;
-}
-
-.button-brand-3 {
-  color: #FFFFFF;
-  background-color: #50B400;
-  border-color: #50B400;
-}
-.button-brand-3:hover {
-  background-color: #FFFFFF;
-}
-
-.button-brand-4 {
-  color: #FFFFFF;
-  background-color: #FFE500;
-  border-color: #FFE500;
-}
-.button-brand-4:hover {
-  background-color: #000000;
-}
-
-.button-brand-5 {
-  color: #FFFFFF;
-  background-color: #F07D00;
-  border-color: #F07D00;
-}
-.button-brand-5:hover {
-  background-color: #FFFFFF;
-}
-
-.button-brand-6 {
-  color: #FFFFFF;
-  background-color: #CBC8C8;
-  border-color: #CBC8C8;
-}
-.button-brand-6:hover {
-  background-color: #000000;
-}
-
-.button-white {
-  color: #2C089B;
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
-}
-.button-white:hover {
-  color: #FFFFFF;
-  background-color: #2C089B;
-}
-
-.button-black {
-  color: #FFFFFF;
-  background-color: #000000;
-  border-color: #000000;
-}
-.button-black:hover {
-  color: #000000;
-  background-color: #FFFFFF;
-}
-
-.button-clear-primary {
-  color: #2C089B;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-primary:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-secondary {
-  color: #2AF135;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-secondary:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-tertiary {
-  color: #FF7272;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-tertiary:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-1 {
-  color: #B30510;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-1:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-2 {
-  color: #6E0887;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-2:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-3 {
-  color: #50B400;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-3:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-4 {
-  color: #FFE500;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-4:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-5 {
-  color: #F07D00;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-5:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-brand-6 {
-  color: #CBC8C8;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-brand-6:hover {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-clear-white {
-  color: #FFFFFF;
-  background-color: transparent;
-  text-decoration: underline;
-  border: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.button-clear-white:hover {
-  color: #FFFFFF;
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.button-rounded {
-  border-radius: 27.5px;
-}
-.button-rounded.size-small {
-  border-radius: 20px;
-}
-
-.progress-bar {
-  display: flex;
-}
-.progress-bar .slider {
-  margin: auto 15px auto 0;
-  position: relative;
-  flex-grow: 1;
-}
-.progress-bar .slider:before {
-  content: "";
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: #E8E8E8;
-  border-radius: 4px;
-}
-.progress-bar .slider .progress {
-  position: relative;
-  border-radius: 4px;
-  background-color: #000000;
-  height: 8px;
-}
-.progress-bar .counter {
-  font-weight: 700;
-  color: #000000;
-  font-size: 14px;
-  line-height: 18px;
-}
-
-.progress-bar-primary .slider .progress {
-  background-color: #2C089B;
-}
-.progress-bar-primary .counter {
-  color: #2C089B;
-}
-
-.progress-bar-secondary .slider .progress {
-  background-color: #2AF135;
-}
-.progress-bar-secondary .counter {
-  color: #2AF135;
-}
-
-.video-wrap {
-  position: relative;
-  padding-bottom: 56.25%;
-}
-
-.video-wrap iframe,
-.video-wrap video {
-  position: absolute;
-  border: 0;
-  display: block;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.image-wrap img {
-  width: 100%;
-  height: auto;
-}
-
-.align-left {
-  text-align: left;
-}
-
-.align-right {
-  text-align: right;
-}
-
-.align-center {
-  text-align: center;
-}
-
-.align-justify {
-  text-align: justify;
-}
-
-.space-below-0 {
-  margin-bottom: 0;
-}
-
-.space-below-1 {
-  margin-bottom: 5px;
-}
-
-.space-below-2 {
-  margin-bottom: 10px;
-}
-
-.space-below-3 {
-  margin-bottom: 15px;
-}
-
-.space-below-4 {
-  margin-bottom: 30px;
-}
-
-.space-below-5 {
-  margin-bottom: 45px;
-}
-
-.space-below-6 {
-  margin-bottom: 60px;
-}
-
-.space-above-0 {
-  margin-top: 0;
-}
-
-.space-above-1 {
-  margin-top: 5px;
-}
-
-.space-above-2 {
-  margin-top: 10px;
-}
-
-.space-above-3 {
-  margin-top: 15px;
-}
-
-.space-above-4 {
-  margin-top: 30px;
-}
-
-.space-above-5 {
-  margin-top: 45px;
-}
-
-.space-above-6 {
-  margin-top: 60px;
-}
-
-.horizontal-padding-1 {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.horizontal-padding-2 {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.horizontal-padding-3 {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.horizontal-padding-4 {
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-.horizontal-padding-5 {
-  padding-left: 45px;
-  padding-right: 45px;
-}
-
-.horizontal-padding-6 {
-  padding-left: 60px;
-  padding-right: 60px;
-}
-
-.vertical-padding-1 {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.vertical-padding-2 {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.vertical-padding-3 {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.vertical-padding-4 {
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-.vertical-padding-5 {
-  padding-top: 45px;
-  padding-bottom: 45px;
-}
-
-.vertical-padding-6 {
-  padding-top: 60px;
-  padding-bottom: 60px;
-}
-
 :host {
   display: contents;
 }
@@ -802,12 +38,40 @@ nav ul li {
   margin: 0;
   padding: 0;
   list-style-type: none;
+  margin-top: 15px;
 }
 
 nav ul li a {
   color: #FFFFFF;
   text-decoration: none;
 }
+nav ul li a[class^=icon-], nav ul li a[class*=icon-] {
+  padding-left: 20px;
+  background-repeat: no-repeat;
+  background-size: auto 10px;
+  background-position: left center;
+}
+nav ul li a.icon-green {
+  background-image: url(/assets/images/triangles-combined-green-match-white.svg);
+}
+nav ul li a.icon-children {
+  background-image: url(/assets/images/triangles-combined-children-white.svg);
+}
+nav ul li a.icon-christmas {
+  background-image: url(/assets/images/triangles-combined-christmas-challenge-white.svg);
+}
+nav ul li a.icon-green-match {
+  background-image: url(/assets/images/triangles-combined-green-match-white.svg);
+}
+nav ul li a.icon-women-girls {
+  background-image: url(/assets/images/triangles-combined-women-girls-white.svg);
+}
+nav ul li a.icon-anchor-match {
+  background-image: url(/assets/images/triangles-combined-anchor-white.svg);
+}
+nav ul li a.icon-emergency {
+  background-image: url(/assets/images/triangles-combined-emergency-white.svg);
+}
 
 .row-top {
   background-image: url(/assets/images/biggive-triangle-green.svg);
@@ -821,56 +85,56 @@ nav ul li a {
   justify-content: space-between;
 }
 .row-top .button-wrap {
-  margin-top: 15px;
+  margin-top: 60px;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
-.row-bottom {
+footer .row-bottom {
   background-color: #000000;
   padding: 60px 60px 15px 60px;
   border-top: 1px solid #FFFFFF;
 }
-.row-bottom .fr-logo {
+footer .row-bottom .fr-logo {
   width: 135px;
 }
-.row-bottom .postscript-wrap {
+footer .row-bottom .postscript-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
 @media screen and (max-width: 768px) {
-  .row-bottom .postscript-wrap {
+  footer .row-bottom .postscript-wrap {
     flex-direction: column;
   }
 }
-.row-bottom .nav.nav-postscript {
+footer .row-bottom .nav.nav-postscript {
   text-align: right;
   flex-grow: 1;
 }
 @media screen and (max-width: 768px) {
-  .row-bottom .nav.nav-postscript {
+  footer .row-bottom .nav.nav-postscript {
     text-align: center;
   }
 }
-.row-bottom .nav-postscript li {
+footer .row-bottom .nav-postscript li {
   display: inline-block;
   margin-left: 1rem;
 }
-.row-bottom .nav-postscript li:first-child {
+footer .row-bottom .nav-postscript li:first-child {
   margin-left: 0;
 }
 @media screen and (max-width: 768px) {
-  .row-bottom .nav-postscript li {
+  footer .row-bottom .nav-postscript li {
     display: block;
     width: 100%;
     margin-left: 0;
   }
 }
-.row-bottom .social-icon-wrap {
+footer .row-bottom .social-icon-wrap {
   border-top: 1px solid #FFFFFF;
   padding-top: 30px;
   margin-top: 30px;
@@ -879,9 +143,12 @@ nav ul li a {
   justify-content: center;
   margin-bottom: 30px;
 }
-.row-bottom .social-icon-wrap .social-icon-item {
+footer .row-bottom .social-icon-wrap .social-icon-item {
   margin: 0 10px;
 }
+footer .row-bottom p {
+  text-align: center;
+}
 
 @media screen and (max-width: 768px) {
   .row-top {
@@ -899,6 +166,7 @@ nav ul li a {
     background-size: auto 50px;
     padding-top: 80px;
     padding-left: 15px;
+    background-position: 15px 30px;
   }
   .row-top .button-wrap * {
     width: 100% !important;