luna-one 3.1.597 → 3.1.599

package/dist/luna/components/Footer/Footer.scss

@@ -1,484 +1,484 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-footer {
-  border-top: 1px solid $trimble-dark-gray;
-  background: $trimble-dark-gray-shade-down;
-  display: flex;
-  flex-direction: column;
-  font-size: $eyebrow-font-size;
-
-  &__grid-wrapper-top,  &__grid-wrapper-bottom {
-    display: grid;
-    padding: 0px calc((100% - 1280px) / 2);
-    grid-template-columns: repeat(16, 1fr);
-  }
-
-  &__grid-wrapper-top {
-    background-color: #252A2E;
-  }
-
-  a {
-    color: $white;
-  }
-
-  &__logo-wrapper {
-    padding-bottom: 50px;
-  }
-
-  &__logo {
-    display: inline-block;
-    margin-bottom: 16px;
-    &.tagFocus:focus,
-    &:focus {
-      outline: 2px solid $trimble-gold;
-    }
-    img {
-      width: 147px;
-      height: 33px;
-    }
-  }
-
-  &__text {
-    font-size: $body-font-size;
-    line-height: 2;
-  }
-
-  &__social-link {
-    display: block;
-    color: $white;
-    line-height: 0;
-  }
-
-  &__social-link.tagFocus:focus {
-    outline: 2px solid $trimble-gold;
-  }
-
-  &__social-link:focus {
-    outline: none;
-  }
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    @media screen and (min-width: $breakpoint-md){
-      padding-right: 30px;
-    }
-    &--text {
-      margin-bottom: 20px;
-      @media screen and (max-width: $breakpoint-sm) {
-        width: 100%;
-        
-      }
-      @media screen and (min-width: $breakpoint-md){
-        width: 60%;
-        padding-right: 100px;
-        margin-bottom: 0;
-      }
-    }
-    &--last {
-      @media screen and (min-width: $breakpoint-sm){
-        width: 100%;
-      }
-    }
-    &--spacer {
-      display: none;
-      @media screen and (min-width: $breakpoint-sm){
-        display: flex;
-      }
-      @media screen and (min-width: $breakpoint-md){
-        display: none;
-      }
-    }
-  }
-
-  &__section-wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    @media screen and (min-width: $breakpoint-sm){
-      width: 50%;
-    }
-    @media screen and (min-width: $breakpoint-md){
-      width: 60%;
-    }
-  }
-
-  &__sector-footer {
-    background-color: $trimble-dark-gray;
-    color: $white;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 60px 0;
-    @media screen and (min-width: $breakpoint-sm) {
-      justify-content: flex-end;
-    }
-  }
-
-  &__grouped-social-menu {
-    grid-column: 2 / span 14 !important;
-
-    .ter-footer__section-wrapper {
-      @media screen and (min-width: $breakpoint-md) {
-        width: 78%;
-      }
-    }
-    
-    .ter-footer__section {
-      width: 50%;
-      @media screen and (min-width: $breakpoint-md){
-        width: 25%;
-      }
-    }
-    
-    .ter-footer__section-social {
-      width: 100%;
-      @media screen and (min-width: $breakpoint-md){
-        width: auto;
-      }
-    
-      &--1 {
-        @media screen and (min-width: $breakpoint-sm){
-          width: 50%;
-        }
-      }
-    
-      &--3 {
-        @media screen and (min-width: $breakpoint-sm){
-          width: 50%;
-        }
-    
-        @media screen and (min-width: $breakpoint-md){
-          width: 25%;
-        }
-      }
-    }
-  }
-
-
-  &__ungrouped-social-menu {    
-    grid-column: 2 / span 14 !important;
-    
-    .ter-footer__section {
-      width: 50%;
-
-      @media screen and (min-width: $breakpoint-md){
-        width: 25%;
-      }
-    }
-    
-    .ter-footer__section-wrapper {
-      @media screen and (min-width: $breakpoint-md){
-        width: 78%;
-      }
-    }
-    
-    .ter-footer__section-social {
-
-      width: 100%;
-      @media screen and (min-width: $breakpoint-sm){
-        width: 50%;
-      }
-      @media screen and (min-width: $breakpoint-md){
-        width: 80%;
-      }
-    }
-  
-  .ter-footer__section-callouts {
-    width: 22%;
-    @media screen and (min-width: $breakpoint-sm){
-      width: 50%;
-    }
-    @media screen and (min-width: $breakpoint-md) {
-      width: 22%;
-    }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      width: 50%;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      width: 100%;
-    }
-  }
-
-  }
-
-  &__callout {    
-    display: flex;
-    margin-bottom: 40px;
-    @media screen and (min-width: $breakpoint-sm){
-      margin-bottom: 55px;
-    }
-  }
-
-  .callout {
-    text-decoration: none;
-    display: inline-block;
-    &:hover,
-    &:focus {
-      .callout__title {
-        color: $white;
-        text-decoration: none;
-        &:after,
-        &:before {
-          border-color: $trimble-gold;
-        }
-        .callout__link-icon,
-        .callout__link-icon svg,
-        .callout__link-icon svg path {
-          fill: $trimble-gold;
-        }
-      }
-    }
-    &__text {
-      position: relative;
-      display: inline-block;
-      vertical-align: top;
-      pointer-events: none;
-    }
-    &__title {
-      font-size: $subheading-size-mobile;
-      line-height: 1.8;
-      color: $white;
-      text-decoration: none;
-      position: relative;
-      font-weight: 400;
-      padding-bottom: 2px;
-      &:after,
-      &:before {
-        content: "";
-        display: block;
-        position: absolute;
-      }
-      &:before {
-        border-bottom: 2px solid transparent;
-        width: 100%;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-    &__icon {
-      margin: 0px 10px 0 0;
-      display: inline-block;
-      max-height: 48px;
-  
-    }
-    &__link-icon {
-      display: inline-block;
-      margin-left: 10px;
-      position: absolute;
-      right: -20px;
-      pointer-events: none;
-    }
-  }
-
-  &__footer-menu {
-
-    list-style-type: none;
-    padding: 0;
-    font-size: $body-font-size;
-    margin-top: 5px;
-    margin-bottom: 25px;
-    display: inline-block;
-    @media screen and (min-width: $breakpoint-sm){
-      padding-left: 20px;
-      margin-bottom: 80px;
-    }
-    &--social {
-      margin-bottom: 0;
-      width: auto;
-    }
-  }
-
-  .footer-menu {
-    &__title {
-      font-weight: 400;
-      text-transform: uppercase;
-    }
-
-    &__link {
-      display: inline-block;
-      position: relative;
-      padding-bottom: 2px;
-      &:before {
-        display: block;
-        position: absolute;
-        content: "";
-        border-bottom: 2px solid transparent;
-        width: 100%;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-      &:hover,
-      &:visited {
-        color: $white;
-      }
-      &:hover:before,
-      &:focus:before,
-      &:active:before {
-        border-color: $trimble-gold;
-      }
-    }
-
-    &__link,
-    &__title {
-      color: $white;
-      margin-bottom: 35px;
-    }
-
-    &__item {
-      display: block;
-      a:hover {
-        color: $white;
-      }
-    }
-  }
-
-  &__section-callouts {
-    width: 22%;
-    @media screen and (min-width: $breakpoint-sm){
-      width: 50%;
-    }
-    @media screen and (min-width: $breakpoint-md) {
-      width: 22%;
-    }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      width: 50%;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      width: 100%;
-    }
-
-  }
-
-  &__section-social {
-    .footer-menu__item {
-      display: inline-block;
-      margin: 0 16px 16px 0;
-      @media screen and (min-width: $breakpoint-lg) {
-        margin: 0 20px 20px 0;
-      }
-    }
-  }
-
-  &__social-link-icon {
-    display: inline-block;
-    height: 32px;
-  }
-
-  &__global-footer {
-    grid-column: 2 / span 14 !important;
-    background-color: $trimble-dark-gray-shade-down;
-    color: $white;
-    padding: 68px 0;
-    display: flex;
-    flex-wrap: wrap;
-    .ter-footer__section {
-      width: 100%;
-      @media screen and (min-width: $breakpoint-sm){
-        width: 50%;
-      }
-      @media screen and (min-width: $breakpoint-md){
-        width: 20%;
-        padding-right: 15px;
-      }
-      &.ter-footer__section--text {
-        @media screen and (min-width: $breakpoint-md){
-          width: 60%;
-        }
-      }
-    }
-  }
-
-  &__legal-stuff {
-    display: flex;
-    &-link {
-      display: inline-block;
-      text-decoration: none;
-      position: relative;
-      margin-bottom: 0;
-      font-size: $eyebrow-font-size;
-      line-height: 2;
-      &:before {
-        border-bottom: 2px solid transparent;
-        width: 100%;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        content: "";
-        display: block;
-        position: absolute;
-        
-      }
-      &:hover,
-      &:focus,
-      &:active {
-        color: $white;
-        text-decoration: none;
-        &:after,
-        &:before {
-          border-color: $trimble-gold;
-        }
-        .callout__link-icon,
-        .callout__link-icon svg,
-        .callout__link-icon svg path {
-          fill: $trimble-gold;
-        }
-      }
-      &:visited {
-        color: $white;
-      }
-    }
-    &-icon {
-      @media screen and (max-width: $breakpoint-md){
-        margin-bottom: 12px;
-      }
-      @media screen and (max-width: $breakpoint-sm){
-        margin-bottom: 24px;
-      }
-    }
-  }
-
-  &__legal-items {
-    padding: 0;
-    display: block;
-    margin: 0;
-  }
-
-  &__legal-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  &__legal-item,
-  &__legal-item a,
-  &__legal-item a:hover {
-    list-style: none;
-    color: $white;
-    margin-bottom: 24px;
-    @media screen and (min-width: $breakpoint-sm){
-      margin-bottom: 12px;
-    }
-    @media screen and (min-width: $breakpoint-md){
-      margin-bottom: 0;
-    }
-  }
-  a:hover,
-  a:visited,
-  a:active,
-  a:active {
-    color: $white;
-  }
-}
-p.ter-footer__legal-stuff-link {
-  &:before,
-  &:after {
-    display: none;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-footer {
+  border-top: 1px solid $trimble-dark-gray;
+  background: $trimble-dark-gray-shade-down;
+  display: flex;
+  flex-direction: column;
+  font-size: $eyebrow-font-size;
+
+  &__grid-wrapper-top,  &__grid-wrapper-bottom {
+    display: grid;
+    padding: 0px calc((100% - 1280px) / 2);
+    grid-template-columns: repeat(16, 1fr);
+  }
+
+  &__grid-wrapper-top {
+    background-color: #252A2E;
+  }
+
+  a {
+    color: $white;
+  }
+
+  &__logo-wrapper {
+    padding-bottom: 50px;
+  }
+
+  &__logo {
+    display: inline-block;
+    margin-bottom: 16px;
+    &.tagFocus:focus,
+    &:focus {
+      outline: 2px solid $trimble-gold;
+    }
+    img {
+      width: 147px;
+      height: 33px;
+    }
+  }
+
+  &__text {
+    font-size: $body-font-size;
+    line-height: 2;
+  }
+
+  &__social-link {
+    display: block;
+    color: $white;
+    line-height: 0;
+  }
+
+  &__social-link.tagFocus:focus {
+    outline: 2px solid $trimble-gold;
+  }
+
+  &__social-link:focus {
+    outline: none;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    @media screen and (min-width: $breakpoint-md){
+      padding-right: 30px;
+    }
+    &--text {
+      margin-bottom: 20px;
+      @media screen and (max-width: $breakpoint-sm) {
+        width: 100%;
+        
+      }
+      @media screen and (min-width: $breakpoint-md){
+        width: 60%;
+        padding-right: 100px;
+        margin-bottom: 0;
+      }
+    }
+    &--last {
+      @media screen and (min-width: $breakpoint-sm){
+        width: 100%;
+      }
+    }
+    &--spacer {
+      display: none;
+      @media screen and (min-width: $breakpoint-sm){
+        display: flex;
+      }
+      @media screen and (min-width: $breakpoint-md){
+        display: none;
+      }
+    }
+  }
+
+  &__section-wrapper {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    @media screen and (min-width: $breakpoint-sm){
+      width: 50%;
+    }
+    @media screen and (min-width: $breakpoint-md){
+      width: 60%;
+    }
+  }
+
+  &__sector-footer {
+    background-color: $trimble-dark-gray;
+    color: $white;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 60px 0;
+    @media screen and (min-width: $breakpoint-sm) {
+      justify-content: flex-end;
+    }
+  }
+
+  &__grouped-social-menu {
+    grid-column: 2 / span 14 !important;
+
+    .ter-footer__section-wrapper {
+      @media screen and (min-width: $breakpoint-md) {
+        width: 78%;
+      }
+    }
+    
+    .ter-footer__section {
+      width: 50%;
+      @media screen and (min-width: $breakpoint-md){
+        width: 25%;
+      }
+    }
+    
+    .ter-footer__section-social {
+      width: 100%;
+      @media screen and (min-width: $breakpoint-md){
+        width: auto;
+      }
+    
+      &--1 {
+        @media screen and (min-width: $breakpoint-sm){
+          width: 50%;
+        }
+      }
+    
+      &--3 {
+        @media screen and (min-width: $breakpoint-sm){
+          width: 50%;
+        }
+    
+        @media screen and (min-width: $breakpoint-md){
+          width: 25%;
+        }
+      }
+    }
+  }
+
+
+  &__ungrouped-social-menu {    
+    grid-column: 2 / span 14 !important;
+    
+    .ter-footer__section {
+      width: 50%;
+
+      @media screen and (min-width: $breakpoint-md){
+        width: 25%;
+      }
+    }
+    
+    .ter-footer__section-wrapper {
+      @media screen and (min-width: $breakpoint-md){
+        width: 78%;
+      }
+    }
+    
+    .ter-footer__section-social {
+
+      width: 100%;
+      @media screen and (min-width: $breakpoint-sm){
+        width: 50%;
+      }
+      @media screen and (min-width: $breakpoint-md){
+        width: 80%;
+      }
+    }
+  
+  .ter-footer__section-callouts {
+    width: 22%;
+    @media screen and (min-width: $breakpoint-sm){
+      width: 50%;
+    }
+    @media screen and (min-width: $breakpoint-md) {
+      width: 22%;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      width: 50%;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      width: 100%;
+    }
+  }
+
+  }
+
+  &__callout {    
+    display: flex;
+    margin-bottom: 40px;
+    @media screen and (min-width: $breakpoint-sm){
+      margin-bottom: 55px;
+    }
+  }
+
+  .callout {
+    text-decoration: none;
+    display: inline-block;
+    &:hover,
+    &:focus {
+      .callout__title {
+        color: $white;
+        text-decoration: none;
+        &:after,
+        &:before {
+          border-color: $trimble-gold;
+        }
+        .callout__link-icon,
+        .callout__link-icon svg,
+        .callout__link-icon svg path {
+          fill: $trimble-gold;
+        }
+      }
+    }
+    &__text {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      pointer-events: none;
+    }
+    &__title {
+      font-size: $subheading-size-mobile;
+      line-height: 1.8;
+      color: $white;
+      text-decoration: none;
+      position: relative;
+      font-weight: 400;
+      padding-bottom: 2px;
+      &:after,
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+      }
+      &:before {
+        border-bottom: 2px solid transparent;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+    &__icon {
+      margin: 0px 10px 0 0;
+      display: inline-block;
+      max-height: 48px;
+  
+    }
+    &__link-icon {
+      display: inline-block;
+      margin-left: 10px;
+      position: absolute;
+      right: -20px;
+      pointer-events: none;
+    }
+  }
+
+  &__footer-menu {
+
+    list-style-type: none;
+    padding: 0;
+    font-size: $body-font-size;
+    margin-top: 5px;
+    margin-bottom: 25px;
+    display: inline-block;
+    @media screen and (min-width: $breakpoint-sm){
+      padding-left: 20px;
+      margin-bottom: 80px;
+    }
+    &--social {
+      margin-bottom: 0;
+      width: auto;
+    }
+  }
+
+  .footer-menu {
+    &__title {
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+
+    &__link {
+      display: inline-block;
+      position: relative;
+      padding-bottom: 2px;
+      &:before {
+        display: block;
+        position: absolute;
+        content: "";
+        border-bottom: 2px solid transparent;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+      &:hover,
+      &:visited {
+        color: $white;
+      }
+      &:hover:before,
+      &:focus:before,
+      &:active:before {
+        border-color: $trimble-gold;
+      }
+    }
+
+    &__link,
+    &__title {
+      color: $white;
+      margin-bottom: 35px;
+    }
+
+    &__item {
+      display: block;
+      a:hover {
+        color: $white;
+      }
+    }
+  }
+
+  &__section-callouts {
+    width: 22%;
+    @media screen and (min-width: $breakpoint-sm){
+      width: 50%;
+    }
+    @media screen and (min-width: $breakpoint-md) {
+      width: 22%;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      width: 50%;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      width: 100%;
+    }
+
+  }
+
+  &__section-social {
+    .footer-menu__item {
+      display: inline-block;
+      margin: 0 16px 16px 0;
+      @media screen and (min-width: $breakpoint-lg) {
+        margin: 0 20px 20px 0;
+      }
+    }
+  }
+
+  &__social-link-icon {
+    display: inline-block;
+    height: 32px;
+  }
+
+  &__global-footer {
+    grid-column: 2 / span 14 !important;
+    background-color: $trimble-dark-gray-shade-down;
+    color: $white;
+    padding: 68px 0;
+    display: flex;
+    flex-wrap: wrap;
+    .ter-footer__section {
+      width: 100%;
+      @media screen and (min-width: $breakpoint-sm){
+        width: 50%;
+      }
+      @media screen and (min-width: $breakpoint-md){
+        width: 20%;
+        padding-right: 15px;
+      }
+      &.ter-footer__section--text {
+        @media screen and (min-width: $breakpoint-md){
+          width: 60%;
+        }
+      }
+    }
+  }
+
+  &__legal-stuff {
+    display: flex;
+    &-link {
+      display: inline-block;
+      text-decoration: none;
+      position: relative;
+      margin-bottom: 0;
+      font-size: $eyebrow-font-size;
+      line-height: 2;
+      &:before {
+        border-bottom: 2px solid transparent;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        content: "";
+        display: block;
+        position: absolute;
+        
+      }
+      &:hover,
+      &:focus,
+      &:active {
+        color: $white;
+        text-decoration: none;
+        &:after,
+        &:before {
+          border-color: $trimble-gold;
+        }
+        .callout__link-icon,
+        .callout__link-icon svg,
+        .callout__link-icon svg path {
+          fill: $trimble-gold;
+        }
+      }
+      &:visited {
+        color: $white;
+      }
+    }
+    &-icon {
+      @media screen and (max-width: $breakpoint-md){
+        margin-bottom: 12px;
+      }
+      @media screen and (max-width: $breakpoint-sm){
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  &__legal-items {
+    padding: 0;
+    display: block;
+    margin: 0;
+  }
+
+  &__legal-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__legal-item,
+  &__legal-item a,
+  &__legal-item a:hover {
+    list-style: none;
+    color: $white;
+    margin-bottom: 24px;
+    @media screen and (min-width: $breakpoint-sm){
+      margin-bottom: 12px;
+    }
+    @media screen and (min-width: $breakpoint-md){
+      margin-bottom: 0;
+    }
+  }
+  a:hover,
+  a:visited,
+  a:active,
+  a:active {
+    color: $white;
+  }
+}
+p.ter-footer__legal-stuff-link {
+  &:before,
+  &:after {
+    display: none;
+  }
+}