Flexblocks

src/scss/modules/_flexblock-activity.scss

@@ -0,0 +1,53 @@
+.flexblock.activity {
+  flex-direction: column;
+
+  li {
+    flex: 1;
+    position: relative;
+    width: auto;
+  }
+
+  p {
+    margin-bottom: 0;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .year,
+  .title {
+    display: inline;
+    font-weight: 600;
+  }
+
+  .summary {
+    width: 100%;
+  }
+
+  .title {
+    margin-left: 1rem;
+  }
+
+
+  @media (min-width: 768px) {
+    p {
+      float: left;
+    }
+
+    .year {
+      width: 15%;
+    }
+
+    .title {
+      margin-left: 4%;
+      margin-right: 4%;
+      width: 27%;
+    }
+
+    .summary {
+      width: 50%;
+    }
+  }
+}

src/scss/modules/_flexblock-clients.scss

@@ -0,0 +1,34 @@
+.flexblock.clients.blink li > a,
+.flexblock.clients li {
+  padding: 0;
+}
+
+.flexblock.clients li figcaption {
+  padding: 0 2.4rem 2.4rem;
+}
+
+.flexblock.clients.border li figcaption {
+  padding-top: 2.4rem;
+}
+
+.clients.blink li>a,
+.clients li {
+  justify-content: inherit;
+}
+
+.clients li img,
+.clients li svg {
+  display: block;
+  padding: 2.4rem;
+}
+
+.clients.border li img,
+.clients.border li svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.clients li:hover {
+  z-index: 1;
+}

src/scss/modules/_flexblock-features.scss

@@ -0,0 +1,73 @@
+.flexblock.features {
+  > li {
+    border-radius: .4rem;
+    margin-bottom: 4.8rem;
+    width: 100%;
+  }
+
+  li h2 {
+    text-transform: uppercase;
+  }
+
+  li span {
+    font-weight: 300;
+  }
+
+  li p {
+    margin: 0;
+  }
+
+  li p em {
+    display: block;
+  }
+
+  li span,
+  li svg {
+    display: block;
+    font-size: 6.4rem;
+    line-height: 1;
+    margin: 0;
+  }
+
+  li img {
+    width: 6.4rem;
+  }
+
+  li span sup {
+    font-size: 3rem;
+  }
+
+  @media (min-width: 1200px) {
+    li span,
+    li svg,
+    li img {
+      float: left;
+      margin-right: .8rem;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .flexblock.features {
+    margin-left: -2%;
+    margin-right: -2%;
+  }
+
+  .flexblock.features > li {
+    margin-left: 2%;
+    margin-right: 2%;
+    width: 29%;
+  }
+
+  .size-50 .flexblock.features > li {
+    width: 46%;
+  }
+
+  .column .flexblock.features > li {
+    width: 100%;
+  }
+
+  footer .flexblock.features>li {
+    margin-bottom: 0;
+  }
+}

src/scss/modules/_flexblock-gallery.scss

@@ -0,0 +1,136 @@
+.flexblock.gallery {
+  li {
+    margin-bottom: 4.8rem;
+
+    &:nth-child(n+4) {
+      flex: inherit;
+    }
+
+    figcaption {
+      padding: 1.6rem;
+      position: relative;
+
+      &:before {
+        content: '';
+        height: 0;
+        left: 20%;
+        margin-left: -.5em;
+        position: absolute;
+        top: .4rem;
+        transform: rotate(135deg);
+        transform-origin: 0 0;
+        transition: .1s;
+        width: 0;
+      }
+    }
+
+    figcaption,
+    &:hover figcaption:before {
+      top: .3rem;
+    }
+  }
+
+  .aligncenter & li figcaption:before {
+    left: 55%;
+    margin-left: 0;
+  }
+
+  li,
+  &.blink li > a {
+    padding: 0;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+
+  h2 + p,
+  h3 + p {
+    margin-top: .8rem;
+  }
+
+  p {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+    margin-bottom: 0;
+  }
+
+  li footer {
+    margin-top: .8rem;
+    padding: 1.2rem 0 0;
+    position: relative;
+  }
+
+  li img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 600px) {
+    margin-left: -2%;
+    margin-right: -2%;
+
+    li {
+      margin-left: 2%;
+      margin-right: 2%;
+      width: 46%;
+    }
+  }
+}
+
+
+
+@media (min-width: 1024px) {
+  .flexblock.gallery li {
+    width: 21%;
+  }
+
+  .grid.sm .flexblock.gallery li,
+  .grid.ms .flexblock.gallery li {
+    width: 29%;
+  }
+
+  .grid.sms .flexblock.gallery li {
+    width: 46%;
+  }
+}
+
+.overlay {
+  bottom: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: all .3s linear;
+  width: 100%;
+  z-index: 2;
+}
+
+li .overlay {
+  align-items: center;
+}
+
+li .overlay h2 {
+  letter-spacing: .2rem;
+  margin: 0;
+  padding: 0 2.4rem;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+.overlay p,
+.overlay time {
+  margin-bottom: 0;
+}
+
+li:hover .overlay {
+  cursor: pointer;
+}

src/scss/modules/_flexblock-metrics.scss

@@ -0,0 +1,28 @@
+.metrics li {
+  text-align: center;
+  width: 100%;
+
+  @media (min-width: 568px) {
+    width: 50%;
+  }
+
+  @media (min-width: 1024px) {
+    width: 25%;
+  }
+}
+
+.metrics li strong {
+  display: block;
+}
+
+.metrics li span,
+.metrics li svg {
+  display: block;
+  font-size: 6.4rem;
+  line-height: 7.2rem;
+  margin: 0 auto;
+}
+
+.card-50 .metrics li {
+  width: 50%;
+}

src/scss/modules/_flexblock-plans.scss

@@ -0,0 +1,81 @@
+.flexblock.plans {
+  > li {
+    border-radius: 3px;
+    margin-bottom: 4.8rem;
+    text-align: center;
+    z-index: 1;
+  }
+
+  li,
+  &.blink li>a {
+    padding: 0;
+  }
+
+  &.blink li > a div,
+  li div {
+    padding-bottom: 3.2rem;
+  }
+
+  li p,
+  li h2 {
+    padding: .8rem 3.2rem;
+  }
+
+  li h2 {
+    float: left;
+    font-weight: 400;
+    letter-spacing: .1rem;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .price {
+    clear: both;
+    display: block;
+    font-size: 4.8rem;
+    font-weight: 400;
+    line-height: 6.2rem;
+    padding: 2.4rem;
+
+    sup {
+      font-size: 1.8rem;
+      margin-right: .4rem;
+    }
+
+    li ul {
+      margin-bottom: 2.4rem;
+    }
+  }
+
+  li ul li {
+    display: block;
+    padding: .8rem 3.2rem;
+    text-align: left;
+    width: 100%;
+  }
+
+
+  @media (min-width: 1024px) {
+    margin-left: -2%;
+    margin-right: -2%;
+
+    >li {
+      margin-left: 2%;
+      margin-right: 2%;
+      width: 29%;
+    }
+
+    >li:hover,
+    >li:nth-child(2) {
+      position: relative;
+      transform: scale(1.08);
+      z-index: 2;
+    }
+
+    &:hover li:nth-child(2):not(:hover) {
+      position: relative;
+      transform: scale(1);
+      z-index: 1;
+    }
+  }
+}

src/scss/modules/_flexblock-reasons.scss

@@ -0,0 +1,35 @@
+.flexblock.reasons {
+  li {
+    counter-increment: list;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      transform: translateY(-.2rem);
+    }
+
+    &:after {
+      bottom: -2.4rem;
+      content: '';
+      display: block;
+      height: 1px;
+      position: relative;
+    }
+
+    &:before {
+      content: counter(list)'.';
+      font-size: 6.4rem;
+      line-height: 1;
+    }
+  }
+
+  @media (min-width: 768px) {
+    padding-left: 8.8rem;
+
+    &:before {
+      left: 2.4rem;
+      position: absolute;
+    }
+  }
+}
+

src/scss/modules/_flexblock-specs.scss

@@ -0,0 +1,45 @@
+.specs li {
+  text-align: left;
+  width: 100%;
+
+  &:after {
+    bottom: -2.4rem;
+    content: '';
+    display: block;
+    height: 1px;
+    position: relative;
+  }
+
+  &:hover {
+    transform: translateX(.2rem);
+  }
+
+  span,
+  svg {
+    display: block;
+    font-size: 6.4rem;
+    line-height: 1;
+    margin: 0;
+  }
+
+  img {
+    width: 6.4rem;
+  }
+
+  span {
+    font-weight: 300;
+
+    sup {
+      font-size: 3rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    span,
+    svg,
+    img {
+      float: left;
+      margin-right: 2.4rem;
+    }
+  }
+}

src/scss/modules/_flexblock-steps.scss

@@ -0,0 +1,33 @@
+.steps li {
+  width: 100%;
+
+  img,
+  span {
+    display: block;
+    margin: 0 auto .8rem;
+  }
+
+  span {
+    font-size: 6.4rem;
+  }
+
+  @media (min-width: 768px) {
+    width: 50%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .steps li {
+    width: 25%;
+  }
+
+  .process {
+    border-left-style: solid;
+    border-left-width: 15px;
+    height: 0;
+    left: 0;
+    position: absolute;
+    top: 60px;
+    width: 0;
+  }
+}

src/scss/modules/_flexblock.scss

@@ -1,4 +1,98 @@
-.flexblock li h2 svg,
-.flexblock li h3 svg {
-  margin-top: 0;
+.flexblock {
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+
+  &:after {
+    clear: both;
+  }
+
+  &:before {
+    content: '';
+    display: table;
+  }
+
+  li,
+  &.blink li > a {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 2.4rem;
+    position: relative;
+  }
+
+  li {
+    flex: auto;
+    text-align: left;
+    transition: .3s;
+    width: 100%;
+
+    &:hover {
+      transform: translateY(-.2rem);
+    }
+
+    @media (min-width: 600px) {
+      width: 50%;
+    }
+
+    @media (min-width: 1024px) {
+      width: 25%;
+    }
+  }
+
+  &.aligncenter li {
+    text-align: center;
+  }
+
+  &.vertical-align li {
+    justify-content: center;
+  }
+
+  &.blink li {
+    padding: 0;
+  }
+
+  li h2 svg,
+  li h3 svg {
+    margin-top: 0;
+  }
+}
+
+h1 + .flexblock,
+h2 + .flexblock,
+h3 + .flexblock,
+div + ul,
+div + ol {
+  margin-top: 3.2rem;
+}
+
+.flexblock li h2,
+.flexblock li h3,
+footer .column h2,
+footer .column h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 3.2rem;
+  margin-bottom: 0;
+}
+
+
+
+.flexblock li li,
+.flexblock.blink li li {
+  padding: 0;
+  width: 100%;
+}
+
+[class*='content-'] .flexblock li p {
+  font-size: 1.8rem;
+  line-height: 3.2rem;
+}
+
+.content-right .flexblock.features li,
+.content-left .flexblock.features li {
+  width: 46%;
 }