jekyll-theme-pirati 0.1.0

data/_sass/components/card.scss

@@ -0,0 +1,154 @@
+$card-ns: '';
+
+.#{$card-ns}c-card {
+  display: block;
+  max-width: 100%;
+  height: 130px;
+  position: relative;
+  background: #fff;
+  overflow: hidden;
+  box-shadow: 0 4px 2px -2px #e3e3e3;
+
+  @include breakpoint(medium down) {
+    height: 100px;
+  }
+}
+
+.#{$card-ns}c-card.#{$card-ns}c-card--big {
+  height: 295px;
+
+  @include breakpoint(medium down) {
+    height: 290px;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card-image-wrapper {
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+
+  .#{$card-ns}c-card__image {
+    min-width: 100%;
+    min-height: 100%;
+    position: absolute;
+    top: -100%;
+    right: -100%;
+    bottom: -100%;
+    left: -100%;
+    margin: auto;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card-header {
+  font-size: 1.6rem;
+  font-family: $header-font-family;
+  font-weight: 500;
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  right: 2rem;
+  color: #343434;
+  z-index: 1;
+
+  @include breakpoint(mobile down) {
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card-header.#{$card-ns}c-card-header--white {
+  color: #fff;
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+    font-size: 1rem;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card__title {
+  line-height: 1.15;
+  margin-bottom: 0.5em;
+}
+
+
+.#{$card-ns}c-card .#{$card-ns}c-card__icon {
+  font-size: 1.6rem;
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  color: #343434;
+  opacity: 0.2;
+  z-index: 1;
+
+  .fa {
+    font-size: 4rem;
+  }
+
+  @include breakpoint(mobile down) {
+    bottom: -1rem !important;
+    transform: scale(0.8);
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card__icon.#{$card-ns}c-card__icon--pos1 {
+  right: -0.8rem;
+  bottom: -0.8rem;
+
+  .fa {
+    font-size: 4.15rem;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card__icon.#{$card-ns}c-card__icon--pos2 {
+  right: 0.1rem;
+  bottom: -1.4rem;
+
+  .fa {
+    font-size: 5.15rem;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card__icon.#{$card-ns}c-card__icon--pos3 {
+  right: -0.4rem;
+  bottom: 0.4rem;
+
+  .fa {
+    font-size: 5.15rem;
+  }
+}
+
+.#{$card-ns}c-card .#{$card-ns}c-card__icon.#{$card-ns}c-card__icon--pos4 {
+  right: 0.2rem;
+  bottom: -0.1rem;
+
+  .fa {
+    font-size: 5.15rem;
+  }
+}
+
+.#{$card-ns}c-card.#{$card-ns}c-card--border:before {
+  content: '';
+  display: block;
+  height: 4px;
+  background: #f3c289;
+  position: absolute;
+  left: 2rem;
+  right: 2rem;
+  top: 0;
+  z-index: 1;
+
+  @include breakpoint(mobile down) {
+    left: 1.5rem;
+    right: 1.5rem;
+  }
+}

data/_sass/components/contact-bar.scss

@@ -0,0 +1,93 @@
+$cb-ns: '';
+
+.#{$cb-ns}c-contact-bar {
+  background: #343434;
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar-header {
+  float: left;
+  background: #343434;
+
+  @include breakpoint(medium down) {
+    float: none;
+  }
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar__heading {
+  font-weight: bold;
+  margin: 0;
+  line-height: 1.3;
+  display: inline-block;
+  font-size: 1.3rem;
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar-items {
+  float: left;
+  list-style-type: none;
+  margin-left: 0;
+  margin-bottom: 0;
+
+  @include breakpoint(medium down) {
+    float: none;
+  }
+
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar__item {
+  display: block;
+  margin-left: 0;
+
+  @include breakpoint(medium) {
+    display: inline-block;
+  }
+
+  @include breakpoint(large) {
+    margin-left: 50px;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+}
+
+.#{$cb-ns}c-contact-bar {
+
+  @include breakpoint(medium) {
+
+    .#{$cb-ns}c-contact-bar__item +
+    .#{$cb-ns}c-contact-bar__item {
+      margin-left: 50px;
+    }
+
+  }
+
+  @include breakpoint(820px down) {
+
+    .#{$cb-ns}c-contact-bar__item +
+    .#{$cb-ns}c-contact-bar__item {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar__section {
+  display: inline-block;
+  font-weight: bold;
+
+  @include breakpoint(mobile down) {
+    display: block;
+  }
+
+}
+
+.#{$cb-ns}c-contact-bar .#{$cb-ns}c-contact-bar__description {
+  display: inline-block;
+
+  @include breakpoint(large) {
+    margin-left: 10px;
+  }
+
+}

data/_sass/components/content-card.scss

@@ -0,0 +1,31 @@
+.c-content-card {
+  background: #f3f3f3;
+
+  &-content-box {
+    padding: 1.75rem 2.15rem;
+
+    p {
+      margin-bottom: 0.75em;
+    }
+  }
+
+  &-img img {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+
+  .c-content-card-title {
+    font-size: 1.45rem;
+    font-family: $body-font-family;
+    margin-bottom: 0.95rem;
+  }
+
+  .c-content-card-title a {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

data/_sass/components/cta-button.scss

@@ -0,0 +1,54 @@
+.c-cta-button {
+  padding: 0.75rem 1rem;
+  color: #fff;
+  background: #5d5d5d;
+  font-size: 1.3rem;
+  border-radius: 1px;
+  display: inline-block;
+  /* offset-x | offset-y | blur-radius | spread-radius | color */
+  box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.15);
+
+  text-decoration: none !important;
+  &:hover {
+      text-decoration: none !important;
+  }
+  i {
+    margin-left: 0.5rem;
+  }
+  transition: ease-out background 0.25s;
+}
+
+.c-cta-button.c-cta-button--primary {
+  background: #2785ce;
+  &:hover {
+    background: darken(#2785ce, 5%);
+  }
+}
+
+.c-cta-button.c-cta-button--secondary {
+  background: #f3c289;
+  &:hover {
+    background: darken(#f3c289, 5%);
+  }
+}
+
+.c-cta-button-group {
+  margin: 0.2rem 0;
+  @include clearfix;
+
+  > .c-cta-button + .c-cta-button {
+    margin-left: 0.65rem;
+  }
+
+  @include breakpoint(medium down) {
+    .c-cta-button {
+      float: left;
+      clear: left;
+    }
+
+    > .c-cta-button + .c-cta-button {
+      margin-left: 0;
+      margin-top: 0.5rem;
+    }
+  }
+}

data/_sass/components/header-bar.scss

@@ -0,0 +1,108 @@
+$hb-ns: '';
+
+.#{$hb-ns}c-header-bar {
+  background: #343434;
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar-divider {
+  width: 100%;
+  height: 1px;
+  margin: 10px auto;
+  background: #adadad;
+
+  @include breakpoint(860px) {
+    display: inline-block;
+    width: 1px;
+    height: 22px;
+    margin: auto 30px;
+    vertical-align: middle;
+  }
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar-items {
+  display: inline-block;
+  list-style-type: none;
+  margin-left: 0;
+  margin-bottom: 0;
+
+  @include breakpoint(800px down) {
+    display: block;
+  }
+
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar-items.#{$hb-ns}c-header-bar-items--bigLh {
+
+  @include breakpoint(mobile down) {
+    line-height: 2;
+  }
+
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar__item {
+  display: inline-block;
+  margin-left: 0;
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+}
+
+.#{$hb-ns}c-header-bar {
+
+  @include breakpoint(medium) {
+
+    .#{$hb-ns}c-header-bar__item +
+    .#{$hb-ns}c-header-bar__item {
+      margin-left: 40px;
+    }
+
+    .#{$hb-ns}c-header-bar__item.#{$hb-ns}c-header-bar__item--smallerSpace +
+    .#{$hb-ns}c-header-bar__item.#{$hb-ns}c-header-bar__item--smallerSpace {
+      margin-left: 12px;
+    }
+
+  }
+
+  @include breakpoint(860px down) {
+
+    .#{$hb-ns}c-header-bar__item +
+    .#{$hb-ns}c-header-bar__item {
+      margin-left: 20px;
+    }
+
+    .#{$hb-ns}c-header-bar__item.#{$hb-ns}c-header-bar__item--smallerSpace +
+    .#{$hb-ns}c-header-bar__item.#{$hb-ns}c-header-bar__item--smallerSpace {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar__section {
+  display: inline-block;
+  font-weight: bold;
+  vertical-align: middle;
+
+  @include breakpoint(mobile down) {
+    display: block;
+  }
+
+}
+
+.#{$hb-ns}c-header-bar .#{$hb-ns}c-header-bar__item {
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  a:hover .#{$hb-ns}c-header-bar__itemDescription {
+    text-decoration: underline;
+  }
+
+  .#{$hb-ns}c-header-bar__itemDescription {
+    margin-left: 5px;
+  }
+}

data/_sass/components/hero.scss

@@ -0,0 +1,164 @@
+.c-hero {
+    background: url('../img/miscellaneous/slider-bg.png');
+    background-size: cover;
+    background-position: top center;
+    background-repeat: no-repeat;
+    color: #ffffff;
+
+    &--plainbg {
+        background: #343434;
+    }
+
+    overflow: hidden;
+}
+
+.c-hero-container {
+    @include clearfix;
+    position: relative;
+    z-index: 2;
+    padding: 45px 10px;
+    &.c-hero-img-join-us {
+        position: relative;
+        &:before {
+            z-index: -1;
+            left: 100%;
+            top: 50%;
+            transform: translate(-85%, -50%);
+            content: '';
+            position: absolute;
+            width: 452px;
+            height: 413px;
+            background: url('../img/miscellaneous/header.png');
+            background-repeat: no-repeat;
+            background-position: right center;
+        }
+
+        @include breakpoint(large down) {
+
+            &:before {
+                opacity: 0.25;
+                transform: translate(-85%, -50%) scale(0.75);
+            }
+        }
+
+        @include breakpoint(medium down) {
+
+            &:before {
+                opacity: 0.15;
+                transform: translate(-85%, -50%) scale(0.75);
+            }
+        }
+    }
+}
+
+.c-hero-block + .c-hero-block {
+    margin-top: 40px;
+}
+
+.c-hero__title {
+    font-size: 2.575rem;
+}
+
+.c-hero .c-hero-content {
+
+    .c-hero__subtitle {
+        font-size: 2rem;
+    }
+
+    h2 {
+        color: #ffffff;
+    }
+
+    p {
+        line-height: 1.2;
+    }
+
+    a {
+        color: #ffffff;
+        text-decoration: underline;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+
+    &.c-hero-content-accent p {
+        font-size: 1.75rem;
+        line-height: 1.4;
+
+        @include breakpoint(medium down) {
+            font-size: 1.45rem;
+        }
+    }
+
+    @include breakpoint(medium down) {
+        &.c-hero-content-accent br {
+            display: none;
+        }
+    }
+}
+
+.c-hero-slider {
+    .orbit-next {
+        padding-right: 10px;
+        right: -100px;
+    }
+    .orbit-previous {
+        padding-left: 10px;
+        left: -100px;
+    }
+    .orbit-next,
+    .orbit-previous {
+        transition: 0.25s all;
+        i {
+            font-size: 3rem;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+    .orbit-container {
+        overflow: visible;
+        height: auto !important;
+        outline: none;
+    }
+
+    &:focus,
+    .orbit-slide:focus {
+        outline: 0 !important;
+    }
+
+    .orbit-slide {
+        max-height: none !important;
+        list-style-type: none;
+    }
+
+    @include breakpoint(1400px down) {
+        .orbit-next {
+            top: -65px;
+            right: 0;
+            padding-right: 1rem;
+        }
+        .orbit-previous {
+            top: -65px;
+            left: auto;
+            right: 75px;
+            padding-left: 1rem;
+        }
+
+        .orbit-next i,
+        .orbit-previous i {
+            font-size: 2rem;
+        }
+    }
+
+    @include breakpoint(mobile down) {
+        .orbit-previous {
+            right: 60px;
+        }
+        .orbit-next i,
+        .orbit-previous i {
+            font-size: 1.5rem;
+        }
+    }
+}