jekyll-theme-pirati 0.1.0

data/_sass/components/top-sub-nav.scss

@@ -0,0 +1,186 @@
+$tsb-ns: '';
+
+nav.#{$tsb-ns}c-top-sub-nav {
+  background: #f3f3f3;
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-inner {
+  position: relative;
+  padding: 45px 2rem;
+  overflow-y: hidden;
+
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 335px;
+    height: 150px;
+    background: url('../img/miscellaneous/vbox.png') no-repeat;
+    bottom: -20px;
+    right: 10px;
+  }
+
+  @include breakpoint(mobile down) {
+    padding: 35px 1.25rem;
+  }
+
+  @include breakpoint(medium down) {
+
+    &:before {
+      right: 20px;
+    }
+
+  }
+
+  @include breakpoint(860px down) {
+    padding-bottom: 130px;
+
+    &:before {
+      transform: translateX(50%);
+      right: 50%;
+      bottom: 0;
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+  }
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-header {
+  display: inline-block;
+
+  @include breakpoint(860px down) {
+    display: block;
+  }
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav__heading {
+  font-size: 1.5rem;
+  font-weight: 500;
+  font-family: $header-font-family;
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-divider {
+  margin: 10px auto;
+
+  &:before {
+    content: '\f105';
+    font-family: 'FontAwesome';
+    font-size: 1.3rem;
+  }
+
+  @include breakpoint(800px) {
+    display: inline-block;
+    width: 1px;
+    height: 22px;
+    margin: auto 30px;
+    vertical-align: baseline;
+  }
+
+  @include breakpoint(860px down) {
+    display: block;
+    margin: 10px auto;
+
+    &:before {
+      content: '\f107';
+      margin-left: -7px;
+    }
+  }
+
+  @include breakpoint(mobile down) {
+    margin: 0px auto;
+  }
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-items {
+  display: inline-block;
+  list-style-type: none;
+  margin-left: 0;
+  margin-bottom: 0;
+
+  @include breakpoint(800px down) {
+    display: block;
+  }
+
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-items.#{$tsb-ns}c-top-sub-nav-items--bigLh {
+
+  @include breakpoint(mobile down) {
+    line-height: 2;
+  }
+
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav__item {
+  display: inline-block;
+  margin-left: 0;
+  font-size: 1.15rem;
+
+  a {
+    color: #0a0a0a;
+    text-decoration: underline;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+}
+
+.#{$tsb-ns}c-top-sub-nav {
+
+  @include breakpoint(medium) {
+
+    .#{$tsb-ns}c-top-sub-nav__item +
+    .#{$tsb-ns}c-top-sub-nav__item {
+      margin-left: 25px;
+    }
+
+    .#{$tsb-ns}c-top-sub-nav__item.#{$tsb-ns}c-top-sub-nav__item--smallerSpace +
+    .#{$tsb-ns}c-top-sub-nav__item.#{$tsb-ns}c-top-sub-nav__item--smallerSpace {
+      margin-left: 12px;
+    }
+
+  }
+
+  @include breakpoint(820px down) {
+
+    .#{$tsb-ns}c-top-sub-nav__item +
+    .#{$tsb-ns}c-top-sub-nav__item {
+      margin-left: 20px;
+    }
+
+    .#{$tsb-ns}c-top-sub-nav__item.#{$tsb-ns}c-top-sub-nav__item--smallerSpace +
+    .#{$tsb-ns}c-top-sub-nav__item.#{$tsb-ns}c-top-sub-nav__item--smallerSpace {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav__section {
+  display: inline-block;
+  font-weight: bold;
+  vertical-align: middle;
+
+  @include breakpoint(mobile down) {
+    display: block;
+  }
+
+}
+
+.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav__item {
+
+  a:hover .#{$tsb-ns}c-top-sub-nav__itemDescription {
+    text-decoration: underline;
+  }
+
+  .#{$tsb-ns}c-top-sub-nav__itemDescription {
+    margin-left: 5px;
+  }
+}

data/_sass/components/vertical-navigation.scss

@@ -0,0 +1,68 @@
+$vn-ns: '';
+
+.#{$vn-ns}c-vertical-navigation {
+  margin: 18px 0 10px 0;
+
+  @include breakpoint(medium down) {
+    padding: 5px;
+  }
+
+  @include breakpoint(small down) {
+    margin-top: 0;
+  }
+}
+
+.#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation__title {
+  font-weight: 500;
+  font-size: 1.3rem;
+}
+
+.#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation-items {
+  list-style-type: none;
+  margin: 0;
+  margin-top: 22px;
+}
+
+.#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation-items {
+
+  .#{$vn-ns}c-vertical-navigation__item a:hover {
+    text-decoration: underline;
+  }
+
+  &.#{$vn-ns}c-vertical-navigation-items--horizontal {
+
+    .#{$vn-ns}c-vertical-navigation__item +
+    .#{$vn-ns}c-vertical-navigation__item  {
+      margin-left: 13px;
+    }
+
+  }
+
+  @include breakpoint(medium down) {
+
+    &.#{$vn-ns}c-vertical-navigation-items--horizontal {
+
+      .#{$vn-ns}c-vertical-navigation__item +
+      .#{$vn-ns}c-vertical-navigation__item  {
+        margin-left: 10px;
+      }
+
+    }
+
+  }
+
+  &.#{$vn-ns}c-vertical-navigation-items--horizontal
+  .#{$vn-ns}c-vertical-navigation__item {
+    display: inline-block;
+  }
+
+  .#{$vn-ns}c-vertical-navigation__item + .#{$vn-ns}c-vertical-navigation__item {
+    margin-top: 3px;
+
+    @include breakpoint(medium down) {
+      margin-top: 5px;
+    }
+
+  }
+
+}

data/_sass/components/welcome-header.scss

@@ -0,0 +1,188 @@
+.c-welcome-header {
+  height: 350px;
+  position: relative;
+  background: url('../img/header/background.jpg') no-repeat;
+  background-size: cover;
+  background-position: center 70%;
+  overflow: hidden;
+
+  div {
+    height: 100%;
+  }
+
+  @include breakpoint(medium down) {
+    height: 390px;
+    background-position: 20% 70%;
+  }
+
+  @include breakpoint(640px down) {
+    background-position: 27% 85%;
+  }
+
+  .headline-kraj {
+    color: white;
+    display: inline-block;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin: 0;
+    padding-bottom: 9px;
+    vertical-align: middle;
+    line-height: 1.1;
+  }
+}
+
+.c-welcome-header .c-welcome-header-wrapper {
+  position: relative;
+
+  @include breakpoint(mobile down) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  &.c-welcome-header-wrapper--wbg {
+
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 500px;
+      height: 300px;
+      background: url('../img/brand/logo-group.png') no-repeat;
+      background-size: 100%;
+      transform-origin: bottom left;
+    }
+
+    @include breakpoint(mobile down) {
+
+      &:before {
+        display: block;
+        width: 350px;
+        height: 250px;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+
+      }
+    }
+
+    .c-welcome-header-wrapper--title {
+      color: white;
+      font-size: 2.8rem;
+      font-weight: bold;
+      text-transform: uppercase;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 75%;
+      text-align: center;
+      display: block;
+    }
+
+  }
+}
+
+.c-welcome-header .c-welcome-header-wrapper .c-welcome-header__img {
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  max-width: calc(50% - 25px);
+  height: auto;
+  max-height: 100%;
+  transform-origin: center right;
+  border: 5px solid #fff;
+
+  @include breakpoint(xlarge down) {
+    width: 40%;
+  }
+
+  @include breakpoint(medium down) {
+    display: none;
+  }
+
+  @include breakpoint(mobile down) {
+    display: block;
+    top: auto;
+    right: auto;
+    left: 50%;
+    bottom: 0.8rem;
+    transform: translateX(-50%);
+    height: 115px;
+    width: auto;
+    border: 2px solid #fff;
+  }
+}
+
+.c-welcome-header .c-welcome-header-content {
+  text-align: center;
+  padding: 25px 0;
+
+  @include breakpoint(medium) {
+    height: auto;
+    text-align: left;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0;
+  }
+
+  @include breakpoint(mobile down) {
+    padding-bottom: 140px;
+  }
+}
+
+.c-welcome-header .c-welcome-header__brand {
+  width: 250px;
+}
+
+.c-welcome-header .c-welcome-header__quote {
+  position: relative;
+  margin: 0;
+  margin-top: 1rem;
+  padding: 0;
+  padding-top: 3rem;
+  font-family: $header-font-family;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1.3;
+  border: 0;
+  font-size: 1rem;
+  color: #e1e1e1;
+  text-shadow: 0 0 5px black, 0 0 5px black;
+
+  br {
+    display: none;
+  }
+
+  &:before {
+    content: '';
+    width: 38px;
+    height: 25px;
+    background: url('../img/miscellaneous/quotes.png') no-repeat;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @include breakpoint(medium) {
+    padding-top: 0;
+    margin-top: 1.5rem;
+    padding-left: 5.5rem;
+    font-size: 1.6rem;
+
+    br {
+      display: block;
+    }
+
+    &:before {
+      left: 0;
+      transform: translateX(50%);
+      top: 0;
+    }
+  }
+}

data/_sass/components/widget-accordion.scss

@@ -0,0 +1,293 @@
+$wa-ns: '';
+
+.#{$wa-ns}c-widget-accordion {
+  @include accordion-container;
+
+  transition: 0.2s background;
+  background: $primary-color;
+  box-shadow: 0 4px 2px -2px #e3e3e3;
+
+  &:hover {
+    background: darken($primary-color, 10%);
+  }
+}
+
+.#{$wa-ns}c-widget-accordion + .#{$wa-ns}c-widget-accordion {
+  margin-top: 2.15rem;
+}
+
+.#{$wa-ns}c-widget-accordion--unstacksibling + .#{$wa-ns}c-widget-accordion--unstacksibling {
+  margin-top: 0rem;
+}
+
+.#{$wa-ns}c-widget-accordion.#{$wa-ns}c-widget-accordion--topspace  {
+  margin-top: 1.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-item {
+  @include accordion-item;
+
+  .#{$wa-ns}c-widget-accordion-link:before {
+    content: '\f196';
+    font-family: 'FontAwesome';
+    font-size: 1.4rem;
+    margin-top: -0.7rem;
+    color: #fff;
+  }
+
+  &.is-active .#{$wa-ns}c-widget-accordion-link:before {
+    content: '\f147';
+  }
+
+  .#{$wa-ns}c-widget-accordion-link.#{$wa-ns}c-widget-accordion-link--fb:before {
+    content: '\f09a';
+    margin-right: 0.5rem;
+  }
+
+  .#{$wa-ns}c-widget-accordion-link.#{$wa-ns}c-widget-accordion-link--twitter:before {
+    content: '\f099';
+    margin-right: 0.5rem;
+  }
+
+  .#{$wa-ns}c-widget-accordion-link.#{$wa-ns}c-widget-accordion-link--fb:hover,
+  .#{$wa-ns}c-widget-accordion-link.#{$wa-ns}c-widget-accordion-link--twitter:hover {
+    background: #2785ce !important;
+    cursor: default;
+  }
+
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-link {
+  @include accordion-title;
+  font-family: $header-font-family;
+  font-weight: 500;
+  font-size: 1.55rem;
+  padding: 0;
+  padding-left: 1.2rem;
+  display: table;
+  height: 50px;
+  min-height: 50px;
+  width: 100%;
+  transition: 0.2s background;
+  background: $primary-color !important;
+
+  &:hover {
+    background: darken($primary-color, 10%) !important;
+  }
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion__icon,
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion__title {
+  display: table-cell;
+  vertical-align: middle;
+  line-height: normal;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion__title--noicon {
+  width: 100%;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion__title--plain {
+  font-family: $body-font-family;
+  font-weight: 600;
+  font-size: 1.15rem;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion__icon {
+  opacity: 0.2;
+  font-size: 2rem;
+  padding-left: 1rem;
+  line-height: 0;
+
+  i.fa-lg {
+    font-size: 3rem;
+  }
+}
+
+.#{$wa-ns}c-widget-accordion
+.#{$wa-ns}c-widget-accordion__icon.#{$wa-ns}c-widget-accordion__icon--bottom {
+  vertical-align: bottom;
+}
+
+.#{$wa-ns}c-widget-accordion
+.#{$wa-ns}c-widget-accordion__icon.#{$wa-ns}c-widget-accordion__icon--bottomPulled i {
+  margin-bottom: -0.2em;
+}
+
+.#{$wa-ns}c-widget-accordion
+.#{$wa-ns}c-widget-accordion__icon.#{$wa-ns}c-widget-accordion__icon--top {
+  vertical-align: top;
+}
+
+.#{$wa-ns}c-widget-accordion span:last-child {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-content {
+  @include accordion-content;
+  background: #f3f3f3;
+  padding: 1.2rem;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-content-inner {
+  background: #ffffff;
+  padding: 1.2rem;
+  line-height: 1.45;
+
+  a {
+    text-decoration: underline;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  h4 {
+    font-weight: bold;
+  }
+
+  &.#{$wa-ns}c-widget-accordion-content-inner--bigp p {
+    font-size: 1.15rem;
+  }
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-link,
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-content {
+  border: 0;
+}
+
+:last-child:not(.is-active) > .c-widget-accordion .c-widget-accordion-link {
+  border-bottom: 0;
+}
+
+:last-child > .c-widget-accordion .c-widget-accordion-content:last-child {
+  border-bottom: 0;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-content__cta {
+  margin-top: 0.65rem;
+
+  a, button {
+    margin: 0;
+    line-height: 1.2;
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
+    border-radius: 2px;
+  }
+
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-content-video {
+
+  .#{$wa-ns}c-widget-accordion-content__video + .#{$wa-ns}c-widget-accordion-content__cta {
+    margin-top: 0.25rem;
+  }
+
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-list__heading {
+  margin-bottom: 0.25em;
+}
+
+.#{$wa-ns}c-widget-accordion .#{$wa-ns}c-widget-accordion-list {
+  margin-left: 0;
+  list-style-type: none;
+  margin-bottom: 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  li:before {
+    content: none;
+  }
+
+  ul {
+    list-style-type: none;
+    margin-left: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  ul li {
+    line-height: 1.25rem;
+    padding-left: 1.35rem;
+    position: relative;
+    line-height: 1.5;
+  }
+
+  li {
+    line-height: 1.4;
+  }
+
+  ul li:before {
+    content: '';
+    font-family: none;
+    position: absolute;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    left: 0;
+    top: 30%;
+    transform: translateY(-50%);
+    background: url('../img/tiles/tableOfContent.png') no-repeat;
+  }
+
+  a {
+    color: $primary-color;
+  }
+}
+
+.#{$wa-ns}c-widget-accordion ul {
+  list-style-type: none;
+  margin-left: 0;
+
+  li {
+    line-height: 2;
+  }
+
+  li:before {
+    display: inline-block;
+    content: '\f10c';
+    font-family: 'FontAwesome';
+    font-size: 0.75rem;
+    vertical-align: middle;
+    padding-right: 0.75rem;
+    color: $primary-color;
+  }
+
+  a {
+    color: #343434;
+  }
+}
+
+// Colors
+
+.#{$wa-ns}c-widget-accordion.#{$wa-ns}c-widget-accordion--alert {
+  background: $alert-color;
+
+  &:hover {
+    background: darken($alert-color, 10%);
+  }
+}
+
+.#{$wa-ns}c-widget-accordion.#{$wa-ns}c-widget-accordion--alert
+ .#{$wa-ns}c-widget-accordion-link {
+  background: $alert-color !important;
+
+  &:hover {
+    background: darken($alert-color, 10%) !important;
+  }
+}
+
+.#{$wa-ns}c-widget-accordion.#{$wa-ns}c-widget-accordion--dark
+ .#{$wa-ns}c-widget-accordion-link {
+  background: #343434 !important;
+
+  &:hover {
+    background: darken(#343434, 10%) !important;
+  }
+}