Rust lp redesign

src/assets/css/app.scss

@@ -46,6 +46,7 @@
 @use "components/image-banner-with-text";
 @use "components/text-with-list";
 @use "components/image-aspect-ratio";
+@use "components/image-aspect-ratio-with-button";
 @use "components/work";
 @use "components/recent-posts";
 @use "components/split-content";
@@ -59,6 +60,7 @@
 @use "components/scroll-slides";
 @use "components/quotes-list";
 @use "components/tech-cards";
+@use "components/service-cards";
 @use "components/case-cards";
 @use "components/strategy-list";
 @use "components/cta-banner";
@@ -68,6 +70,7 @@
 @use "components/images-side-by-side-grid";
 @use "components/grid-event-card";
 @use "components/form-with-image";
+@use "components/table-of-contents";
 
 @use "animations/text-animation";
 

src/assets/css/base/_global.scss

@@ -185,6 +185,14 @@ a {
     text-underline-offset: 0.25rem;
     text-decoration-color: inherit;
   }
+
+  &.link-black {
+    color: var(--color-body-text);
+  }
+
+  &.link-purple {
+    color: var(--color-purple);
+  }
 }
 
 button {
@@ -200,6 +208,22 @@ button {
   }
 }
 
+.color- {
+  &white {
+    color: var(--color-white) !important;
+  }
+}
+
+.background- {
+  &aqua {
+    background-color: var(--color-aqua);
+  }
+
+  &white {
+    background-color: var(--color-white);
+  }
+}
+
 @media (min-width: $breakpoint-l) {
   body {
     line-height: 2;

src/assets/css/base/_utility.scss

@@ -28,7 +28,22 @@
   display: none;
 }
 
+.mobile-hidden {
+  @media (max-width: $breakpoint-s) {
+    display: none;
+  }
+}
+
+.display-hidden {
+  @media (min-width: $breakpoint-s) {
+    display: none;
+  }
+}
+
 .m {
+  &-0 {
+    margin: 0;
+  }
   &t-0 {
     margin-top: 0;
   }
@@ -85,6 +100,13 @@
   &b-5 {
     margin-bottom: 5rem;
   }
+  &b-6 {
+    margin-bottom: 5rem;
+
+    @media (min-width: $breakpoint-s) {
+      margin-bottom: 6rem;
+    }
+  }
   &b-10 {
     margin-bottom: 5rem;
 
@@ -136,6 +158,54 @@
   }
 }
 
+.p {
+  &-2 {
+    padding: 2rem;
+  }
+  &-3 {
+    padding: 3rem;
+  }
+  &-5 {
+    padding: 5rem;
+  }
+  &-s-5 {
+    @media (min-width: $breakpoint-s) {
+      padding: 5rem;
+    }
+  }
+  &t-3 {
+    padding-top: 3rem;
+  }
+  &t-4 {
+    padding-top: 4rem;
+  }
+  &b-0 {
+    padding-bottom: 0;
+  }
+  &b-3 {
+    padding-bottom: 3rem;
+  }
+  &b-5 {
+    padding-bottom: 5rem;
+  }
+  &b-10 {
+    padding-bottom: 5rem;
+
+    @media (min-width: $breakpoint-s) {
+      padding-bottom: 10rem;
+    }
+  }
+  &y-10 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+
+    @media (min-width: $breakpoint-s) {
+      padding-top: 10rem;
+      padding-bottom: 10rem;
+    }
+  }
+}
+
 body[data-js-enabled="false"] * {
   transition-duration: 0s !important;
 }

src/assets/css/components/_color-hero.scss

@@ -109,5 +109,14 @@
 
   .color-hero {
     min-height: 90vh;
+
+    &__LP {
+      min-height: max-content;
+    }
   }
 }
+
+.color-hero__container__LP {
+  width: 90%;
+  padding: 12rem 0 10vh;
+}

src/assets/css/components/_image-aspect-ratio-with-button.scss

@@ -0,0 +1,26 @@
+@use "../base/breakpoints" as *;
+
+.image-aspect-ratio-with-button__wrapper {
+  position: relative;
+
+  & .image-aspect-ratio-with-button__image {
+    filter: grayscale(100%);
+    transition: all 0.5s ease-out;
+  }
+
+  &:hover {
+    & .image-aspect-ratio-with-button__image {
+      filter: none;
+      transition: all 0.25s ease-out;
+    }
+  }
+}
+
+.image-aspect-ratio-with-button__button {
+  position: absolute;
+  top: 44%;
+  left: 50%;
+  transform: translate(-44%, -50%);
+  z-index: 2;
+  scale: 1.5; 
+}

src/assets/css/components/_logo-list.scss

@@ -51,12 +51,13 @@
 }
 
 .logo-list__image {
-  display: block;
   text-align: center;
 
   img,
   svg {
     max-height: 5rem;
+    margin: 0 auto;
+    display: block;
   }
 }
 

src/assets/css/components/_open-source-list.scss

@@ -8,6 +8,22 @@
   margin: 5rem 0;
 }
 
+.opensource-list__list-redesigned {
+  column-gap: 1.5rem;
+
+  & .opensource-list__project-image {
+    height: auto;
+  }
+
+  & .btn-secondary__text {
+    font-size: 1.5rem;
+  }
+
+  & .opensource-list__project-image {
+    max-width: 32rem;
+  }
+}
+
 .opensource-list__project-image {
   height: 4rem;
   width: auto;

src/assets/css/components/_quote.scss

@@ -52,8 +52,12 @@
   margin: 0 0 2rem;
 }
 
+.quote__position {
+  font-weight: 300;
+}
+
 @media (min-width: $breakpoint-s) {
-  .quote:not(.quote__workshop) {
+  .quote:not(.quote__workshop, .quote__redesigned) {
     margin: 6.25rem auto;
     flex-wrap: nowrap;
     gap: 1.5rem;
@@ -88,3 +92,29 @@
     text-align: right;
   }
 }
+
+// Quote styling redesign, as featured in the Rust Services LP
+
+.quote__redesigned {
+  margin: 3rem auto 0;
+  gap: 1rem;
+
+  @media (min-width: $breakpoint-s) {
+    margin: 7rem auto 0;
+    gap: 2rem;
+  }
+
+  & .quote__content {
+    max-width: 70rem;
+    text-align: left;
+  }
+
+  & .quote__text {
+    font-weight: inherit;
+    line-height: 3rem;
+  }
+
+  & .quote__source {
+    line-height: 3rem;
+  }
+}

src/assets/css/components/_secondary-feature.scss

@@ -15,6 +15,10 @@
   line-height: 0;
 }
 
+.secondary-feature__image-square.split-content__author img {
+  clip-path: none;
+}
+
 .ember-consultants {
   display: flex;
   flex-direction: row;

src/assets/css/components/_service-cards.scss

@@ -0,0 +1,54 @@
+@use "../base/breakpoints" as *;
+
+.service-cards__grid {
+  grid-template-columns: 1fr;
+
+  @media (min-width: $breakpoint-m) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.service-cards {
+  background-color: var(--color-purple);
+
+  & h1 {
+    color: var(--color-white);
+  }
+
+  & .service-card__grid-element {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 4rem 2rem;
+
+    @media (min-width: $breakpoint-m) {
+      padding: 4rem;
+    }
+  }
+}
+
+.service-cards__intro {
+  max-width: 64remp;
+}
+
+.service-cards__logo {
+  position: relative;
+  max-width: 80%;
+}
+
+.service-cards__grid-element {
+  background-color: var(--color-white);
+  color: black;
+
+  & a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.service-card__content {
+  min-height: max-content;
+}

src/assets/css/components/_table-of-contents.scss

@@ -0,0 +1,36 @@
+@use "../base/breakpoints" as *;
+
+.table-of-contents__list {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: $breakpoint-m) {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 0.5rem;
+    column-gap: 3rem;
+    justify-items: center;
+  }
+
+  @media (min-width: $breakpoint-l) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  color: var(--color-white);
+
+  & .btn-secondary {
+    color: var(--color-white);
+    text-decoration: underline;
+    text-underline-offset: 0.25rem;
+    font-size: 1.5rem;
+    line-height: 2;
+
+    & .icon-arrow {
+      --icon-arrow-size: 1.5rem;
+      color: var(--color-white);
+    }
+  }
+}