first load

2025-12-16 04:40:00 -03:00
parent 9f33a94e0e
commit 6fa41a771d
856 changed files with 70411 additions and 1 deletions
--- a/styles/_actions.scss
+++ b/styles/_actions.scss
@@ -0,0 +1,20 @@
+/***** Actions *****/
+/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
+.actions {
+  text-align: center;
+  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
+
+  & button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    min-height: 35px;
+    min-width: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/styles/_article.scss
+++ b/styles/_article.scss
@@ -0,0 +1,248 @@
+/***** Article *****/
+.article {
+  /*
+  * The article grid is defined this way to optimize readability:
+  * Sidebar | Content | Free space
+  * 17%     | 66%     | 17%
+  */
+  @include desktop {
+    flex: 1 0 66%;
+    max-width: 66%;
+    min-width: 640px;
+    padding: 0 30px;
+  }
+
+  flex: 1 0 auto; //Explicit values needed whith flex-direction: column for IE11
+
+  &-container {
+    @include desktop {
+      flex-direction: row;
+    }
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-header {
+    @include tablet {
+      flex-direction: row;
+      margin-top: 0;
+    }
+
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    margin-top: 20px;
+  }
+
+  &-avatar {
+    margin-right: 10px;
+  }
+
+  &-author {
+    margin-bottom: 10px;
+  }
+
+  &-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+
+    @include tablet {
+      flex-basis: 100%; /* Take entire row */
+    }
+
+    .icon-lock {
+      position: relative;
+      left: -5px;
+      vertical-align: baseline;
+    }
+  }
+
+  [role="button"] {
+    @include tablet {
+      width: auto;
+    }
+    flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
+    width: 100%;
+  }
+
+  &-info {
+    max-width: 100%;
+  }
+
+  &-meta {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &-body {
+    @include content-body;
+    > p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &-content {
+    line-height: 1.6;
+    margin: 40px 0;
+    word-wrap: break-word;
+  }
+
+  &-footer {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+  }
+
+  &-comment-count {
+    color: $secondary-text-color;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &-icon {
+      vertical-align: middle;
+      color: $brand_color;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &-sidebar {
+    @include desktop {
+      border: 0;
+      flex: 0 0 17%;
+      height: auto;
+      max-width: 17%;
+    }
+
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
+    flex: 1 0 auto; //Explicit values needed whith flex-direction: column for IE11
+    margin-bottom: 20px;
+    padding: 0;
+  }
+
+  &-relatives {
+    @include tablet {
+      flex-direction: row;
+    }
+
+    border-top: 1px solid $low-contrast-border-color;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 0;
+
+    > * {
+      flex: 1 0 50%; //Explicit values needed whith flex-direction: column for IE11
+      min-width: 50%;
+      overflow-wrap: break-word;
+      margin-right: 0;
+
+      &:last-child {
+        padding: 0;
+      }
+
+      @include tablet {
+        padding-right: 20px;
+      }
+    }
+  }
+
+  &-votes {
+    border-top: 1px solid $low-contrast-border-color;
+    padding: 30px 0;
+    text-align: center;
+
+    &-question { // Explicit values for rendering h2 like a span for accessibility.
+      font-size: $font-size-base;
+      font-weight: normal;
+      margin-bottom: 0;
+    }
+  }
+
+  &-vote {
+    margin: 10px 5px;
+    min-width: 90px;
+    width: auto;
+  }
+
+  &-more-questions {
+    margin: 10px 0 20px;
+    text-align: center;
+    @include standalone-link;
+  }
+
+  &-return-to-top {
+    @include desktop {
+      display: none;
+    }
+
+    border-top: 1px solid $high-contrast-border-color;
+
+    a {
+      color: $text_color;
+      display: block;
+      padding: 20px 0;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+
+    &-icon {
+      transform: rotate(0.5turn);
+    }
+  }
+
+  &-subscribe button {
+    @extend .button;
+    &[data-selected="true"] {
+      @extend .button-primary;
+    }
+  }
+
+  td > p:first-child,
+  th > p:first-child {
+    margin-top: 0;
+  }
+
+  td > p:last-child,
+  th > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sidenav {
+  &-title {
+    font-size: $font-size-base;
+    position: relative;
+    font-weight: 600;
+  }
+
+  &-item {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.recent-articles,
+.related-articles {
+  &-title {
+    @extend .comment-heading;
+  }
+
+  li {
+    margin-bottom: 15px;
+  }
+}
--- a/styles/_attachments.scss
+++ b/styles/_attachments.scss
@@ -0,0 +1,32 @@
+/***** Attachments *****/
+/* Styles attachments inside posts, articles and comments */
+.attachments {
+  .attachment-item {
+    padding-left: 20px;
+    position: relative;
+    margin-bottom: 10px;
+
+    &:last-child { margin-bottom: 0; }
+
+    .attachment-icon {
+      color: $text_color;
+      left: 0;
+      position: absolute;
+      top: 5px;
+    }
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: 20px;
+
+      .attachment-icon {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+
+.upload-dropzone span {
+  color: $secondary-text-color;
+}
--- a/styles/_base.scss
+++ b/styles/_base.scss
@@ -0,0 +1,147 @@
+/***** Base *****/
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: $background_color;
+  color: $text_color;
+  font-family: $text_font;
+  font-size: $font-size-base;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+
+  > main {
+    @include desktop {
+      min-height: 65vh;
+    }
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading_font;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 22px;
+}
+
+h3 {
+  font-size: 18px;
+  font-weight: $font-weight-semibold;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+a {
+  color: $link_color;
+  text-decoration: none;
+
+  &:visited {
+    color: $visited_link_color;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+.hbs-form, .search {
+  input,
+  textarea {
+    color: #000;
+    font-size: $input-font-size;
+  }
+  
+  input {
+    max-width: 100%;
+    box-sizing: border-box;
+    transition: $input-transition;
+  
+    /* We use the :where selector to not increase the specificity of the selector */
+    &:where(:not([type="checkbox"])) {
+      outline: none;
+  
+      &:focus {
+        border: 1px solid $brand_color;
+      }
+    }
+  }
+  
+  input[disabled] {
+    background-color: #ddd;
+  }
+  
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
+      no-repeat #fff;
+    background-position: right 10px center;
+    border: 1px solid $high-contrast-border-color;
+    border-radius: 4px;
+    padding: 8px 30px 8px 10px;
+    outline: none;
+    color: $field-text-focus-color;
+    width: 100%;
+  
+    &:focus {
+      border: 1px solid $brand_color;
+    }
+  
+    &::-ms-expand {
+      display: none;
+    }
+  }
+  
+  textarea {
+    border: 1px solid $high-contrast-border-color;
+    border-radius: 2px;
+    resize: vertical;
+    width: 100%;
+    outline: none;
+    padding: 10px;
+  
+    &:focus {
+      border: 1px solid $brand_color;
+    }
+  }
+}
+
+
+.container {
+  @include max-width-container;
+}
+
+.container-divider {
+  border-top: 1px solid $low-contrast-border-color;
+  margin-bottom: 20px;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.error-page {
+  @include max-width-container;
+}
+
+.visibility-hidden {
+  @include visually-hidden;
+}
--- a/styles/_blocks.scss
+++ b/styles/_blocks.scss
@@ -0,0 +1,91 @@
+/***** Blocks *****/
+/* Used in Homepage#categories and Community#topics */
+.blocks {
+  &-list {
+    @include tablet {
+      margin: 0 -15px;
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    list-style: none;
+    padding: 0;
+  }
+
+  &-item {
+    @include tablet {
+      margin: 0 15px 30px;
+    }
+
+    border: 1px solid $brand_color;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: $brand_color;
+    display: flex;
+    flex: 1 0 340px;
+    margin: 0 0 30px;
+    max-width: 100%;
+    text-align: center;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $brand_color;
+
+      * {
+        color: $brand_text_color;
+        text-decoration: none;
+      }
+    }
+
+    &-internal {
+      background-color: transparent;
+      border: 1px solid $low-contrast-border-color;
+
+      .icon-lock {
+        height: 15px;
+        width: 15px;
+        bottom: 5px;
+        position: relative;
+      }
+
+      a { color: $text_color; }
+    }
+  }
+
+  &-item-link {
+    color: $brand_color;
+    padding: 20px 30px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    border-radius: inherit;
+
+    &:visited,
+    &:hover,
+    &:active {
+      color: inherit;
+      text-decoration: none;
+    }
+    
+    &:focus {
+      @include focus-ring;
+      text-decoration: none;
+    }
+  }
+
+  &-item-title {
+    margin-bottom: 0;
+    font-size: 16px;
+  }
+
+  &-item-description {
+    margin: 0;
+  }
+
+  &-item-description:not(:empty) {
+    margin-top: 10px;
+  }
+}
--- a/styles/_breadcrumbs.scss
+++ b/styles/_breadcrumbs.scss
@@ -0,0 +1,27 @@
+/***** Breadcrumbs *****/
+.breadcrumbs {
+  @include tablet {
+    margin: 0;
+  }
+
+  margin: 0 0 15px 0;
+  padding: 0;
+  display: flex;
+
+  li {
+    color: $secondary-text-color;
+    font-size: $font-size-small;
+    max-width: 450px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    + li::before {
+      content: ">";
+      margin: 0 4px;
+    }
+
+    a:visited {
+      color: $link_color;
+    }
+  }
+}
--- a/styles/_buttons.scss
+++ b/styles/_buttons.scss
@@ -0,0 +1,97 @@
+/***** Buttons *****/
+.button {
+  @include tablet { width: auto; }
+
+  background-color: transparent;
+  border: 1px solid $button-color;
+  border-radius: 4px;
+  color: $button-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 2.34; //Taken from Zendesk garden bedrock
+  margin: 0;
+  padding: 0 20px;
+  text-align: center;
+  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+  -webkit-touch-callout: none;
+
+  &:visited {
+    color: $button-color;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.button-primary {
+    background-color: $brand_color;
+    color: $brand_text_color;
+    text-decoration: none;
+  }
+
+  &.button-primary {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $hover-button-color;
+      border-color: $hover-button-color;
+    }
+  }
+
+  &[data-disabled] {
+    cursor: default;
+  }
+}
+
+.button-large, .hbs-form input[type="submit"] {
+  @include tablet {
+    width: auto;
+  }
+
+  cursor: pointer;
+  background-color: $button-color;
+  border: 0;
+  border-radius: 4px;
+  color: $brand_text_color;
+  font-size: 14px;
+  line-height: 2.72;
+  min-width: 190px;
+  padding: 0 1.9286em;
+  width: 100%;
+
+  &:visited {
+    color: $brand_text_color;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $hover-button-color;
+  }
+
+
+  &[disabled] {
+    background-color: #ddd;
+  }
+}
+
+.button-secondary {
+  color: $secondary-text-color;
+  border: 1px solid $high-contrast-border-color;
+  background-color: transparent;
+
+  &:visited {
+    color: $secondary-text-color;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $text_color;
+    border: 1px solid $high-contrast-border-color;
+    background-color: $primary-shade;
+  }
+}
--- a/styles/_category.scss
+++ b/styles/_category.scss
@@ -0,0 +1,59 @@
+/***** Category pages *****/
+.category {
+  &-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-content {
+    @include desktop {
+      flex: 0 0 80%;
+    }
+
+    flex: 1;
+    max-width: 100%;
+  }
+}
+
+.section-tree {
+  @include tablet { flex-direction: row; }
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .section {
+    @include tablet { flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */ }
+    flex: initial;
+    max-width: 100%;
+  }
+
+  &-title {
+    margin-bottom: 0;
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
+
+    a { color: $text_color; }
+  }
+
+  .see-all-articles {
+    display: block;
+    padding: 15px 0;
+  }
+}
+
+.article-list {
+  &-item {
+    font-size: $font-size-bigger;
+    padding: 15px 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    a { color: $text_color; }
+  }
+}
+
+.icon-star {
+  color: $brand_color;
+  font-size: 18px;
+}
--- a/styles/_collapsible-nav.scss
+++ b/styles/_collapsible-nav.scss
@@ -0,0 +1,137 @@
+/* Navigation element that collapses on mobile */
+.collapsible-nav {
+  @include tablet {
+    flex-direction: row;
+  }
+
+  flex-direction: column;
+  font-size: $font-size-navigation;
+  position: relative;
+}
+
+.collapsible-nav-border {
+  @include tablet {
+    border-top: 0;
+  }
+
+  border-bottom: 1px solid $low-contrast-border-color;
+  border-top: 1px solid $low-contrast-border-color;
+}
+
+.collapsible-nav-toggle {
+  @include tablet { display: none; }
+  top: calc(45px / 2);
+  transform: translateY(-50%);
+  position: absolute;
+  right: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+
+  [dir="rtl"] & {
+    left: 0;
+    right: auto;
+  }
+
+  &-icon {
+    display: none;
+  }
+
+  &[aria-expanded="false"] {
+    .chevron-icon {
+      display: inline-block;
+    }
+  }
+  
+  &[aria-expanded="true"] {
+    .x-icon {
+      display: inline-block;
+    }
+  }
+
+  &:focus {
+    outline: none;
+    border: 1px solid $brand_color;
+  }
+}
+
+.collapsible-nav-list {
+  @include tablet {
+    flex-direction: row;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  li {
+    @include tablet {
+      line-height: normal;
+      margin-right: 30px;
+
+      [dir="rtl"] & {
+        margin-left: 30px;
+        margin-right: 0;
+      }
+
+      a {
+        text-decoration: none;
+        padding: 15px 0;
+      }
+    }
+
+    color: $text_color;
+    line-height: 45px;
+    order: 1; // All elements have the same order
+
+    a {
+      color: $text_color;
+      display: block;
+    }
+  }
+
+  li:hover {
+    @include tablet {
+      border-bottom: 4px solid #ddd;
+
+      a:not([aria-current="page"]) {
+        padding: 15px 0 11px 0;
+        text-decoration: none;
+      }
+    }
+  }
+
+  li:not([aria-selected="true"]),
+  li:not(.current) {
+    @include tablet { display: block; }
+    display: none;
+  }
+
+  li[aria-selected="true"] {
+    @include tablet {
+      padding: 15px 0 11px 0;
+    }
+  }
+
+  li[aria-selected="true"],
+  li.current {
+    @include tablet {
+      border-bottom: 4px solid $brand_color;
+      order: 1;
+    }
+
+    order: 0; //Move to top of menu
+    position: relative;
+
+    a { color: $text_color; }
+  }
+}
+
+.collapsible-nav[aria-expanded="true"] {
+  li:not([aria-selected="true"]),
+  li:not(.current) {
+    display: block;
+  }
+}
--- a/styles/_collapsible-sidebar.scss
+++ b/styles/_collapsible-sidebar.scss
@@ -0,0 +1,69 @@
+/* Sidebar navigation that collapses on mobile */
+.collapsible-sidebar {
+  @include desktop {
+    max-height: none;
+    padding: 0;
+  }
+  flex: 1;
+  max-height: 45px;
+  overflow: hidden;
+  padding: 10px 0;
+  position: relative;
+
+  &-title {
+    margin-top: 0;
+  }
+
+  &-toggle {
+    @include desktop { display: none; }
+    position: absolute;
+    top: calc(45px / 2);
+    transform: translateY(-50%);
+    right: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+
+    [dir="rtl"] & {
+      left: 0;
+      right: auto;
+    }
+
+    &-icon {
+      display: none;
+    }
+  
+    &[aria-expanded="false"] {
+      .chevron-icon {
+        display: inline-block;
+      }
+    }
+    
+    &[aria-expanded="true"] {
+      .x-icon {
+        display: inline-block;
+      }
+    }
+
+    &:focus {
+      outline: none;
+      border: 1px solid $brand_color;
+    }
+  }
+
+  &-body {
+    @include desktop { display: block; }
+    display: none;
+  }
+
+  &[aria-expanded="true"] {
+    max-height: none;
+
+    .collapsible-sidebar-body {
+      display: block;
+    }
+  }
+}
--- a/styles/_comments.scss
+++ b/styles/_comments.scss
@@ -0,0 +1,161 @@
+/***** Comments *****/
+/* Styles comments inside articles, posts and requests */
+.comment {
+  border-bottom: 1px solid $low-contrast-border-color;
+  padding: 20px 0;
+
+  &-heading {
+    margin-bottom: 5px;
+    margin-top: 0;
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
+  }
+
+  &-overview {
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
+    padding: 20px 0;
+
+    p { margin-top: 0; }
+  }
+
+  &-callout {
+    color: $secondary-text-color;
+    display: inline-block;
+    font-size: $font-size-small;
+    margin-bottom: 0;
+
+    @include standalone-link;
+  }
+
+
+  &-sorter {
+    display: inline-block;
+    float: right;
+
+    .dropdown-toggle {
+      color: $secondary-text-color;
+      font-size: $font-size-small;
+    }
+
+    [dir="rtl"] & {
+      float: left;
+    }
+  }
+
+  &-wrapper {
+    display: flex;
+    position: relative;
+
+    &.comment-official {
+      @include tablet { padding-top: 20px; }
+
+      border: 1px solid $brand_color;
+      padding: 40px 20px 20px; // 20 + 20 of official commment badge
+    }
+  }
+
+  &-info {
+    min-width: 0;
+    padding-right: 20px;
+    width: 100%;
+
+    [dir="rtl"] & {
+      padding-right: 0;
+      padding-left: 20px;
+    }
+  }
+
+  &-author {
+    align-items: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+
+    @include tablet { justify-content: space-between; }
+  }
+
+  &-avatar {
+    margin-right: 10px;
+
+    [dir="rtl"] & {
+      margin-left: 10px;
+      margin-right: 0;
+    }
+  }
+
+  &-meta {
+    flex: 1 1 auto;
+  }
+
+  &-labels {
+    flex-basis: 100%;
+
+    @include tablet {
+      flex-basis: auto;
+    }
+  }
+
+  .status-label:not(.status-label-official) {
+    margin-top: 10px;
+
+    @include tablet { margin-top: 0; }
+  }
+
+  &-form {
+    display: flex;
+    padding-top: 30px;
+    word-wrap: break-word;
+  }
+
+  &-container { width: 100%; }
+
+  &-form-controls {
+    @include tablet {
+      [dir="ltr"] & {
+        text-align: right;
+      }
+    }
+    display: none;
+    margin-top: 10px;
+    text-align: left;
+
+    input[type="submit"] {
+      @include desktop {
+        margin-left: 15px;
+        [dir="rtl"] & {
+          margin-left: 0;
+          margin-right: 15px;
+        }
+      }
+      margin-top: 15px;
+    }
+
+    input[type="checkbox"] {
+      margin-right: 5px;
+
+      [dir="rtl"] { margin-left: 5px; }
+    }
+  }
+
+  &-ccs { display: none; }
+  &-ccs + textarea { margin-top: 10px; }
+
+  &-attachments {
+    margin-top: 10px;
+
+    a { color: $brand_color; }
+  }
+
+  &-body {
+    @include text-overflow;
+    @include content-body;
+    font-family: $text_font;
+    line-height: 1.6;
+    overflow-x: auto;
+  }
+
+  &-mark-as-solved {
+    display: inline-block;
+  }
+}
--- a/styles/_community.scss
+++ b/styles/_community.scss
@@ -0,0 +1,147 @@
+/***** Community *****/
+.community {
+  &-hero {
+    background-image: url($community_background_image);
+    margin-bottom: 10px;
+  }
+
+  &-footer {
+    padding-top: 50px;
+    text-align: center;
+
+    &-title {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+  }
+
+  &-featured-posts .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &-featured-posts,
+  &-activity {
+    padding-top: 40px;
+    width: 100%;
+  }
+
+  &-header {
+    margin-bottom: 30px;
+
+    .title {
+      margin-bottom: 0;
+      font-size: 16px;
+    }
+  }
+}
+
+.post-to-community {
+  @include tablet { margin: 0; }
+  margin-top: 10px;
+}
+
+/* Community topics grid */
+.topics {
+  max-width: none;
+  width: 100%;
+
+  &-item {
+    .meta-group {
+      justify-content: center;
+      margin-top: 20px;
+    }
+  }
+}
+
+/* Community topic page */
+
+.topic-header {
+  @include tablet { padding-bottom: 10px; }
+  border-bottom: 1px solid $low-contrast-border-color;
+  font-size: $font-size-small;
+
+  .dropdown {
+    @include tablet {
+      border-top: 0;
+      display: inline-block;
+      margin-right: 20px;
+      padding: 0;
+    }
+
+    display: block;
+    border-top: 1px solid $low-contrast-border-color;
+    padding: 10px 0;
+  }
+}
+
+.no-posts-with-filter {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* Topic, post and user follow button */
+.community-follow {
+  @include tablet {
+    margin-bottom: 0;
+    width: auto;
+  }
+
+  margin-bottom: 10px;
+  width: 100%;
+
+  button {
+    @extend .button;
+    @include tablet { width: auto;}
+
+    line-height: 30px;
+    padding: 0 10px 0 15px;
+    position: relative;
+    width: 100%;
+
+    &:hover { background-color: $brand_color; }
+
+    &:hover::after, &:focus::after {
+      border-color: $brand_text_color;
+      color: $brand_text_color;
+    }
+
+    &[data-selected="true"] {
+      background-color: $brand_color;
+      color: $brand_text_color;
+
+      &::after {
+        border-left: 1px solid $brand_text_color;
+        color: $brand_text_color;
+      }
+
+      &:hover {
+        background-color: $hover-button-color;
+        border-color: $hover-button-color;
+      }
+    }
+
+    &::after {
+      @include tablet {
+        position: static;
+      }
+
+      border-left: 1px solid $button-color;
+      content: attr(data-follower-count);
+      color: $button-color;
+      display: inline-block;
+      font-family: $heading_font;
+      margin-left: 15px;
+      padding-left: 10px;
+      position: absolute;
+      right: 10px;
+
+      [dir="rtl"] & {
+        border-left: 0;
+        border-right: 1px solid $button-color;
+        margin: 0 10px 0 0;
+        padding: 0 10px 0 0;
+      }
+    }
+  }
+}
--- a/styles/_community_badge.scss
+++ b/styles/_community_badge.scss
@@ -0,0 +1,64 @@
+/***** Community Badges *****/
+/* Styles labels used next to the authors of article comments, community posts, and community comments */
+.community-badge-title {
+  background-color: #04444d;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: $font-weight-semibold;
+  padding: 0px 8px;
+  vertical-align: top;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: 18px;
+  vertical-align: middle;
+}
+
+.community-badge-titles {
+  display: inline;
+}
+
+.community-badge-achievement {
+  display: block;
+  height: 16px;
+  white-space: nowrap;
+  width: 16px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.community-badge-achievements {
+  display: flex;
+}
+
+.community-badge-achievements-rest {
+  font-size: 12px;
+  font-weight: $font-weight-semibold;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: top;
+}
+
+.community-badge {
+  margin: 2px;
+}
+
+.profile-info {
+  .community-badge-title {
+    padding: 2px 8px;
+    line-height: 20px;
+  }
+
+  .community-badge-achievement {
+    height: 40px;
+    width: 40px;
+  }
+
+  .community-badge-achievements-rest {
+    line-height: 40px;
+    font-size: 20px;
+  }
+}
--- a/styles/_content-tags.scss
+++ b/styles/_content-tags.scss
@@ -0,0 +1,36 @@
+.content-tags {
+  > p {
+    color: #68737D;
+    margin-top: 32px;
+    margin-bottom: 4px;
+  }
+
+  &-add-hint {
+    color: #68737D;
+    font-size: 14px;
+  }
+}
+
+.content-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  word-break: break-word;
+
+  li {
+    border-right: 1px solid #C2C8CC;
+    margin-bottom: 4px;
+
+    [dir="ltr"] & {
+      padding-right: 8px;
+      margin-right: 8px;
+    }
+    [dir="rtl"] & {
+      padding-left: 8px;
+      margin-left: 8px;
+    }
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
--- a/styles/_dropdowns.scss
+++ b/styles/_dropdowns.scss
@@ -0,0 +1,133 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle {
+  cursor: pointer;
+  background: none;
+  border: 0;
+  display: inline-block;
+  padding: 0;
+  text-align: initial;
+  vertical-align: middle;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  > * {
+    display: inline-block;
+  }
+
+  &[aria-expanded="true"] + .dropdown-menu {
+    display: block;
+  }
+}
+
+.dropdown-menu {
+  background: #fff;
+  border: 1px solid $menu-border-color;
+  border-radius: 3px;
+  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
+  display: none;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  left: 0;
+  margin-top: 1px;
+  min-width: 170px;
+  padding: 10px 0;
+  position: absolute;
+  text-align: left;
+  z-index: 1000;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  [role="separator"] {
+    border-bottom: 1px solid #e9ebed;
+    margin: 4px 0;
+  }
+
+  [role="menuitem"],
+  [role="menuitemradio"] {
+    color: #2f3941;
+    cursor: pointer;
+    display: block;
+    padding: 7px 40px 7px 20px;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    text-align: start;
+    line-height: inherit;
+    width: 100%;
+
+    [dir="rtl"] & {
+      padding: 7px 20px 7px 40px;
+    }
+    &:hover,
+    &:focus {
+      background: rgba(31, 115, 183, 0.08);
+      text-decoration: none;
+      color: #2f3941;
+    }
+
+    &[aria-selected="true"],
+    &[aria-checked="true"] {
+      cursor: default;
+
+      &::after {
+        content: "";
+        background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
+        display: inline-block;
+        height: 12px;
+        margin-left: 10px;
+        width: 12px;
+
+        [dir="rtl"] & {
+          margin-left: 0;
+          margin-right: 10px;
+          float: left;
+        }
+
+      }
+
+    }
+
+    &[hidden], &[aria-hidden="true"] {
+      display: none !important;
+    }
+  }
+}
+
+.dropdown-menu-end {
+  left: auto;
+  right: 0;
+}
+
+.dropdown-menu-top {
+  bottom: 100%;
+  margin-bottom: 1px;
+}
+
+[dir="rtl"] {
+
+  .dropdown-menu {
+    left: auto;
+    right: 0;
+    text-align: right;
+  }
+
+  .dropdown-menu-end {
+    left: 0;
+    right: auto;
+  }
+
+}
+
+.dropdown-chevron-icon {
+  vertical-align: middle;
+}
--- a/styles/_footer.scss
+++ b/styles/_footer.scss
@@ -0,0 +1,28 @@
+/***** Footer *****/
+.footer {
+  border-top: 1px solid $low-contrast-border-color;
+  margin-top: 60px;
+  padding: 30px 0;
+
+  a {
+    color: $secondary-text-color;
+  }
+
+  &-inner {
+    @include max-width-container;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-language-selector button {
+    color: $secondary-text-color;
+    display: inline-block;
+  }
+}
+
+.powered-by-zendesk {
+  a,
+  a:visited {
+    color: $secondary-text-color;
+  }
+}
--- a/styles/_forms.scss
+++ b/styles/_forms.scss
@@ -0,0 +1,109 @@
+/***** Forms *****/
+
+.form {
+  max-width: 650px;
+}
+
+.form-field ~ .form-field {
+  margin-top: 25px;
+}
+
+.form-field label {
+  display: block;
+  font-size: $font-size-small;
+  margin-bottom: 5px;
+}
+
+.form-field input {
+  border: 1px solid $high-contrast-border-color;
+  border-radius: 4px;
+  padding: 10px;
+  width: 100%;
+
+  &:focus { border: 1px solid $brand_color; }
+}
+
+.form-field input[type="text"] {
+  border: 1px solid $high-contrast-border-color;
+  border-radius: 4px;
+
+  &:focus { border: 1px solid $brand_color; }
+}
+
+.form-field input[type="checkbox"] {
+  width: auto;
+}
+
+// Select box
+.form-field .nesty-input {
+  border-radius: 4px;
+  border: 1px solid $high-contrast-border-color;
+  height: 40px;
+  line-height: 40px;
+  outline: none;
+  vertical-align: middle;
+
+  &:focus {
+    border: 1px solid $brand_color;
+    text-decoration: none;
+  }
+}
+
+.form-field .hc-multiselect {
+  &-toggle {
+    border: 1px solid $high-contrast-border-color;
+  }
+}
+
+.form-field .hc-multiselect-toggle:focus {
+  outline: none;
+  border: 1px solid $brand_color;
+  text-decoration: none;
+}
+
+.form-field textarea {
+  vertical-align: middle;
+}
+
+.form-field input[type="checkbox"] + label {
+  margin: 0 0 0 10px;
+}
+
+.form-field .optional {
+  color: $secondary-text-color;
+  margin-left: 4px;
+}
+
+.form-field p {
+  color: $secondary-text-color;
+  font-size: 12px;
+  margin: 5px 0;
+}
+
+.form footer {
+  margin-top: 40px;
+  padding-top: 30px;
+}
+
+.form footer a {
+  color: $secondary-text-color;
+  cursor: pointer;
+  margin-right: 15px;
+}
+
+.form .suggestion-list {
+  font-size: $font-size-small;
+  margin-top: 30px;
+
+  label {
+    border-bottom: 1px solid $low-contrast-border-color;
+    display: block;
+    padding-bottom: 5px;
+  }
+
+  li {
+    padding: 10px 0;
+
+    a:visited { color: $visited_link_color; }
+  }
+}
--- a/styles/_header.scss
+++ b/styles/_header.scss
@@ -0,0 +1,261 @@
+/***** Header *****/
+$header-height: 71px;
+
+.header {
+  @include max-width-container;
+  position: relative;
+  align-items: center;
+  display: flex;
+  height: $header-height;
+  justify-content: space-between;
+}
+
+.logo img {
+  max-height: 37px;
+  vertical-align: middle;
+}
+
+.logo span {
+  margin: 0 10px;
+  color: $brand_color;
+}
+
+.logo a {
+  display: inline-block;
+}
+
+.logo a:hover, .logo a:focus, .logo a:active {
+  text-decoration: none;
+}
+
+.user-nav {
+  @include tablet { position: relative; }
+  display: inline-block;
+  position: absolute;
+  white-space: nowrap;
+
+  &[aria-expanded="true"] {
+    background-color: #fff;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15), 0 4px 10px 0 rgba(0, 0, 0, .1);
+    border: solid 1px #ddd;
+    right: 0;
+    left: 0;
+    top: $header-height;
+    z-index: 1;
+
+    > a {
+      display: block;
+      margin: 20px;
+    }
+
+    > .user-nav-list {
+      li {
+        display: block;
+      }
+
+      a {
+        display: block;
+        margin: 20px;
+      }
+    }
+  }
+}
+
+.user-nav-list {
+  display: block;
+  list-style: none;
+
+  > li {
+    display: inline-block;
+  }
+}
+
+.nav-wrapper-desktop {
+  @include mobile { display: none; }
+  @include tablet { display: none; }
+  @include desktop { display: inline-block; }
+
+  a {
+    @include tablet {
+      display: inline-block;
+    }
+
+    border: 0;
+    color: $link_color;
+    display: none;
+    font-size: 14px;
+    padding: 0 20px 0 0;
+    width: auto;
+
+    [dir="rtl"] & { padding: 0 0 0 20px;}
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent;
+      color: $link_color;
+      text-decoration: underline;
+    }
+  }
+}
+
+.nav-wrapper-mobile {
+  @include desktop { display: none; }
+
+  .menu-button-mobile {
+    background: none;
+    border: 0;
+    width: auto;
+    min-width: 71px;
+    cursor: pointer;
+
+    .icon-menu {
+      padding: 7px;
+      vertical-align: middle;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+    }
+
+    &[aria-expanded="true"] {
+      .icon-menu {
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  .menu-list-mobile {
+    position: absolute;
+    background-color: #fff;
+    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .15);
+    border-top: solid 1px #ddd;
+    border-bottom: solid 1px #ddd;
+    right: 0;
+    left: 0;
+    top: $header-height;
+    z-index: 2;
+
+    &[aria-expanded="false"] {
+      display: none;
+    }
+
+    &[aria-expanded="true"] {
+      display: block;
+    }
+  }
+
+  .menu-list-mobile-items {
+    .item {
+      margin: 4px 0;
+    }
+
+    li:empty:not(.nav-divider){
+      display: none;
+    }
+
+    .nav-divider {
+      border-bottom: 0.1px solid #ddd;
+      padding: 0;
+
+      &:last-child {
+        display: none;
+      }
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding: 8px 24px;
+
+      width: 100%;
+      height: 100%;
+      color: $text_color;
+      cursor: pointer;
+      text-align: start;
+
+      &:active, &:focus, &:hover {
+        background-color: #f3f3f3;
+        text-decoration: underline;
+      }
+    }
+
+    a {
+      display: block;
+      padding: 8px 24px;
+      width: 100%;
+      height: 100%;
+      color: $text_color;
+
+      &:active, &:focus, &:hover {
+        background-color: #f3f3f3;
+      }
+    }
+
+    .my-profile {
+      display: flex;
+      line-height: 1.5;
+
+      .my-profile-tooltip {
+        font-size: 12px;
+        color: #68737D;
+      }
+    }
+
+    .menu-profile-avatar {
+      height: 20px;
+      width: 20px;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 8px;
+      margin-top: 1px;
+
+      [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.skip-navigation {
+  align-items: center;
+  background-color: black;
+  color: white;
+  display: flex;
+  font-size: 14px;
+  justify-content: center;
+  left: -999px;
+  margin: 20px;
+  padding: 20px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  z-index: -999;
+
+
+  [dir="rtl"] & {
+    left: initial;
+    right: -999px;
+  }
+
+  &:focus,
+  &:active {
+    left: auto;
+    overflow: auto;
+    text-align: center;
+    text-decoration: none;
+    top: auto;
+    z-index: 999;
+
+
+  [dir="rtl"] & {
+    left: initial;
+    right: auto;
+  }
+  }
+}
+
+// Disable the skip-navigation link when modals are open
+#zd-modal-container ~ .skip-navigation {
+  display: none;
+}
--- a/styles/_hero.scss
+++ b/styles/_hero.scss
@@ -0,0 +1,16 @@
+/***** Hero component *****/
+.hero {
+  background-image: url($homepage_background_image);
+  background-position: center;
+  background-size: cover;
+  height: 300px;
+  padding: 0 20px;
+  text-align: center;
+  width: 100%;
+
+  &-inner {
+    @include vertical-align;
+    max-width: 610px;
+    margin: 0 auto;
+  }
+}
--- a/styles/_home-page.scss
+++ b/styles/_home-page.scss
@@ -0,0 +1,81 @@
+/***** Homepage *****/
+
+.section {
+  @include tablet {
+    margin-bottom: 60px;
+  }
+
+  margin-bottom: 40px;
+}
+
+.home-section h2 {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+/***** Promoted articles *****/
+
+.promoted-articles {
+  @include desktop { flex-direction: row; }
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  &-item {
+    @include desktop {
+      align-self: flex-end;
+      flex: 0 0 auto;
+      padding-right: 30px;
+      width: 33%; /* Three columns on desktop */
+
+      [dir="rtl"] & { padding: 0 0 0 30px; }
+    }
+
+    flex: 1 0 auto;
+
+    &:nth-child(3n) {
+      padding-right: 0;
+    }
+
+    a {
+      display: block;
+      border-bottom: 1px solid $low-contrast-border-color;
+      padding: 15px 0;
+    }
+
+    .icon-lock {
+      vertical-align: baseline;
+    }
+
+    &:last-child a {
+      @include desktop {
+        border-bottom: 1px solid $low-contrast-border-color;
+      }
+
+      border: 0;
+    }
+  }
+
+}
+
+/***** Community section in homepage *****/
+.community {
+  text-align: center;
+
+  &-image {
+    min-height: 300px;
+    margin-top: 32px;
+    background-image: url($community_image);
+    background-position: center;
+    background-repeat: no-repeat;
+    max-width: 100%;
+  }
+
+  @include standalone-link;
+}
+
+.community,
+.activity {
+  border-top: 1px solid $low-contrast-border-color;
+  padding: 30px 0;
+}
--- a/styles/_metadata.scss
+++ b/styles/_metadata.scss
@@ -0,0 +1,26 @@
+/***** Metadata *****/
+.meta-group {
+  display: block;
+}
+
+.meta-group-opposite {
+  float: right;
+}
+
+[dir="rtl"] .meta-group-opposite {
+  float: left;
+}
+
+.meta-group * {
+  display: inline;
+}
+
+.meta-data {
+  color: $secondary-text-color;
+  font-size: $font-size-small;
+
+  &:not(:last-child)::after {
+    content: "\00B7";
+    margin: 0 5px;
+  }
+}
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -0,0 +1,190 @@
+// Mixins
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin max-width-container {
+  @media (min-width: #{$max-width-container}) {
+    padding: 0;
+    width: 90%;
+  }
+
+  max-width: $max-width-container;
+  margin: 0 auto;
+  padding: 0 5%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin text-overflow {
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word; //IE/Edge compatibility
+}
+
+@mixin focus-ring {
+  outline: 0;
+  box-shadow: 0 0 0 3px $brand_color;
+}
+
+@mixin standalone-link {
+  a {
+    color: $link_color;
+    text-decoration: underline;
+
+    &:visited {
+      color: $visited_link_color;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $hover_link_color;
+    }
+  }
+}
+
+@mixin image-alignment {
+  &.image-style-align-left {
+    float: left;
+    margin: 8px 20px 6px 0;
+  }
+
+  &.image-style-align-right {
+    float: right;
+    margin: 8px 0px 6px 20px;
+  }
+
+  &.image-style-block-align-right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  &.image-style-block-align-left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+}
+
+@mixin content-body {
+  @include standalone-link;
+
+  display: flow-root;
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  p > img {
+    @include image-alignment;
+  }
+
+  figure.image {
+    display: table;
+
+    margin: 0 auto;
+
+    > img {
+      display: block;
+      width: 100%;
+    }
+
+    @include image-alignment;
+  }
+
+
+  figcaption {
+    padding: 10px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: $secondary-shade;
+  }
+
+  ul,
+  ol {
+    padding-left: 20px;
+    list-style-position: outside;
+    margin: 20px 0 20px 20px;
+
+    [dir="rtl"] & {
+      padding-right: 20px;
+      padding-left: 0;
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+
+  // Sub level list
+  ul > ul,
+  ol > ol,
+  ol > ul,
+  ul > ol,
+  li > ul,
+  li > ol {
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  :not(pre) > code {
+    background: $primary-shade;
+    border: 1px solid $low-contrast-border-color;
+    border-radius: 3px;
+    padding: 0 5px;
+    margin: 0 2px;
+  }
+
+  pre {
+    background: $primary-shade;
+    border: 1px solid $low-contrast-border-color;
+    border-radius: 3px;
+    padding: 10px 15px;
+    overflow: auto;
+    white-space: pre;
+    direction: ltr;
+  }
+
+  blockquote {
+    border-left: 1px solid $low-contrast-border-color;
+    color: $secondary-text-color;
+    font-style: italic;
+    padding: 0 15px;
+  }
+}
+
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
--- a/styles/_my-activities.scss
+++ b/styles/_my-activities.scss
@@ -0,0 +1,230 @@
+/***** My activities *****/
+.my-activities {
+  &-nav {
+    background-color: $secondary-shade;
+    margin-bottom: 20px;
+  }
+
+  &-sub-nav {
+    margin-bottom: 30px;
+  }
+
+  &-table {
+    .striped-list-title { /* My activities tables */
+      @include desktop {
+        margin-bottom: 0;
+        max-width: 500px;
+        min-width: 350px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      display: block;
+      margin-bottom: 10px;
+      max-width: 350px;
+      white-space: normal;
+    }
+
+    thead {
+      @include tablet { display: table-header-group; }
+      display: none;
+    }
+
+    th:first-child,
+    td:first-child {
+      @include desktop { width: 500px; }
+      padding-left: 0;
+    }
+
+    th:last-child,
+    td:last-child {
+      padding-right: 0;
+    }
+
+    // On mobile, only show the first column
+    td:not(:first-child) {
+      @include tablet { display: table-cell; }
+
+      display: none;
+    }
+  }
+}
+
+/* Requests table */
+.requests {
+  &-search {
+    width: 100%;
+  }
+
+  &-table-toolbar {
+    @include tablet {
+      flex-direction: row;
+    }
+
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+
+    .search {
+      flex: 1;
+      width: 100%;
+    }
+
+    .request-table-filter {
+      @include tablet {
+        width: auto;
+      }
+
+      width: 100%;
+    }
+
+    .request-filter {
+      @include tablet {
+        margin: 0 0 0 30px;
+        [dir="rtl"] & { margin: 0 30px 0 0; }
+      }
+
+      display: block;
+    }
+
+    .request-filter-label {
+      @include tablet {
+        margin-top: 0;
+      }
+
+      font-size: $font-size-small;
+      margin-top: 30px;
+    }
+
+    select {
+      @include tablet {
+        margin-bottom: 0;
+        max-width: 300px;
+        width: auto;
+      }
+
+      max-height: 40px;
+      margin-bottom: 30px;
+      width: 100%;
+    }
+
+    .organization-subscribe {
+      @include tablet {
+        margin-left: 10px;
+        [dir="rtl"] & { margin: 0 10px 0 0; }
+      }
+
+      button {
+        @extend .button;
+        line-height: 40px;
+      max-height: 40px;
+      padding: 0 20px;
+        &[data-selected="true"] {
+          @extend .button-primary;
+        }
+      }
+    }
+
+    & + .requests-search-info {
+      margin-top: 15px;
+
+      &.meta-data::after {
+        content: "";
+        margin: 0;
+      }
+
+      & + .requests {
+        margin-top: 20px;
+      }
+    }
+
+    & + .requests {
+      margin-top: 40px;
+    }
+  }
+
+  .requests-table {
+    &-meta {
+      @include tablet {
+        display: none;
+      }
+
+      display: block;
+    }
+
+    thead {
+      @include tablet { display: table-header-group; }
+      display: none;
+    }
+
+    &-info {
+      @include tablet {
+        display: table-cell;
+        vertical-align: middle;
+        width: auto;
+      }
+
+      display: block;
+    }
+
+    .requests-link {
+      position: relative;
+    }
+
+    .requests-sort-symbol {
+      position: absolute;
+      left: calc(100% + 3px);
+      bottom: 0;
+      font-size: 10px;
+    }
+  }
+}
+
+/* Following table */
+.subscriptions {
+  &-subscribe button {
+    @include tablet { width: auto; }
+    @extend .button;
+    &[data-selected="true"] {
+      @extend .button-primary;
+    }
+  }
+
+  &-table {
+    td:last-child {
+      @include tablet { display: table-cell; }
+      display: block;
+    }
+
+    td:first-child {
+      display: flex;
+      align-items: center;
+    }
+
+    .user-avatar {
+      margin-right: 10px;
+    }
+  }
+
+  .striped-list-title {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+/* Contributions table */
+.contributions-table {
+  td:last-child {
+    @include tablet {
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
+    color: $secondary-text-color;
+    font-size: $font-size-small;
+  }
+}
+
+.no-activities { color: $secondary-text-color; }
--- a/styles/_notifications.scss
+++ b/styles/_notifications.scss
@@ -0,0 +1,148 @@
+/***** Notifications *****/
+.notification {
+  border: 1px solid;
+  display: table;
+  font-family: sans-serif;
+  font-size: 12px;
+  padding: 13px 15px;
+  transition: height .2s;
+  width: 100%;
+  color: #555;
+}
+
+.notification a {
+  color: #158ec2;
+}
+
+.notification-inner {
+  margin: 0 auto;
+  padding: 0 20px;
+  max-width: 980px;
+}
+
+.notification-icon, .notification-text, .notification-dismiss {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.notification-text {
+  padding: 0 15px;
+  width: 100%;
+}
+
+.notification + .notification {
+  margin-bottom: -1px;
+  position: relative;
+  top: -1px;
+}
+
+/* Error */
+
+.notification-error {
+  background: #ffeded;
+  border-color: #f7cbcb;
+}
+
+.notification-error .notification-icon::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
+}
+
+/* Notice */
+
+.notification-notice {
+  background: #dbf3ff;
+  border-color: #b5e0f5;
+}
+
+.notification-notice .notification-icon::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+/* Alert / Lock */
+
+.notification-alert {
+  color: #ad5e18;
+  background: #fff8ed;
+  border-color: #fcdba9;
+}
+
+.notification-alert .notification-icon::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
+}
+
+.notification-icon::before {
+  background-size: cover;
+  content: "";
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: middle;
+}
+
+/* Dismiss button */
+
+.notification-dismiss, a.notification-dismiss {
+  color: #555;
+  cursor: pointer;
+  opacity: .6;
+  transition: opacity 100ms ease;
+  text-decoration: none !important;
+}
+
+.notification-dismiss:hover {
+  opacity: 1;
+}
+
+/* Inline notifications */
+
+.notification-inline {
+  border-radius: 4px;
+  line-height: 14px;
+  margin-top: 5px;
+  padding: 5px;
+  position: relative;
+  text-align: left;
+  vertical-align: middle;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  &.notification-error::before {
+    @extend .notification-icon;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
+    margin: -2px 5px 0 0;
+
+    [dir="rtl"] & {
+      margin: 0 0 0 5px;
+    }
+  }
+
+  &.notification-error {
+    background-color: #fff0f1;
+    border: 1px solid #e35b66;
+    color: #cc3340;
+  }
+
+  &.notification-large {
+    padding: 13px 15px;
+    margin-bottom: 25px;
+  }
+}
+
+.notification-left-aligned {
+  text-align: left;
+  padding-left: 0;
+}
+
+html[dir="rtl"] {
+  .notification-left-aligned {
+    text-align: right;
+    padding-left: auto;
+    padding-right: 0;
+  }
+}
--- a/styles/_page_header.scss
+++ b/styles/_page_header.scss
@@ -0,0 +1,48 @@
+// Component made for elements that are separated with space between
+.page-header {
+
+  @include tablet {
+    align-items: baseline;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 10px 0;
+
+  .section-subscribe {
+    @include tablet {
+      margin-bottom: 0;
+    }
+
+    flex-shrink: 0; //Avoid collapsing elements in Safari
+    margin-bottom: 10px;
+  }
+
+  h1 {
+    flex-grow: 1;
+    margin-bottom: 10px;
+  }
+
+  &-description {
+    @include desktop {
+      flex-basis: 100%;
+    }
+    font-style: italic;
+    margin: 0 0 30px 0;
+    word-break: break-word;
+  }
+
+  .icon-lock {
+    height: 20px;
+    width: 20px;
+    position: relative;
+    left: -5px;
+    vertical-align: baseline;
+  }
+}
--- a/styles/_pagination.scss
+++ b/styles/_pagination.scss
@@ -0,0 +1,57 @@
+/***** Pagination *****/
+
+.pagination {
+  margin: 20px 0;
+  text-align: center;
+
+  &-next, &-prev, &-first, &-last {
+    display: inline-block;
+    &-link {
+      @extend .button;
+    }
+  }
+
+  &-first, &-last {
+    &-link {
+      padding: 0 10px;
+    }
+
+    &-text {
+     @include visually-hidden;
+    }
+  }
+
+  &-next {
+    &-link {
+      padding-right: 10px;
+    }
+    &-text {
+      margin-right: 10px;
+    }
+    [dir="rtl"] & {
+      &-link {
+        padding-left: 10px;
+      }
+      &-text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  &-prev {
+    &-link {
+      padding-left: 10px;
+    }
+    &-text {
+      margin-left: 10px;
+    }
+    [dir="rtl"] & {
+      &-link {
+        padding-right: 10px;
+      }
+      &-text {
+        margin-right: 10px;
+      }
+    }
+  }
+}
--- a/styles/_post.scss
+++ b/styles/_post.scss
@@ -0,0 +1,152 @@
+/***** Post *****/
+/*
+* The post grid is defined this way:
+* Content | Sidebar
+* 70%     | 30%
+*/
+.post {
+  @include desktop {
+    flex: 1 0 70%;
+    max-width: 70%;
+  }
+
+  flex: 1;
+  margin-bottom: 10px;
+
+  &-container {
+    @include desktop {
+      flex-direction: row;
+    }
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-header {
+    @include tablet {
+      align-items: baseline;
+      flex-direction: row;
+    }
+
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .status-label { vertical-align: super; }
+  }
+
+  &-title {
+    @include tablet {
+      margin-bottom: 0;
+      padding-right: 10px;
+    }
+    margin-bottom: 20px;
+    width: 100%;
+
+    h1 {
+      @include tablet { margin-right: 5px; }
+      display: inline;
+      vertical-align: middle;
+    }
+  }
+
+  &-author {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-avatar {
+    margin-bottom: 30px;
+  }
+
+  &-content {
+    font-family: $text_font;
+    line-height: 1.6;
+    word-break: break-word;
+  }
+
+  &-info-container {
+    display: flex;
+    margin-bottom: 40px;
+  }
+
+  &-info {
+    min-width: 0;
+    padding-right: 20px;
+    width: 100%;
+
+    [dir="rtl"] & {
+      padding-right: 0;
+      padding-left: 20px;
+    }
+  }
+
+  &-meta {
+    display: inline-block;
+    flex: 1;
+    margin-left: 10px;
+    vertical-align: middle;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: 10px;
+    }
+  }
+
+  &-body {
+    @include content-body;
+  }
+
+  &-footer {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+  }
+
+  &-comment-count {
+    color: $secondary-text-color;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    .icon-comments {
+      color: $brand_color;
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      margin: 5px;
+      vertical-align: middle;
+    }
+  }
+
+  &-sidebar {
+    @include desktop {
+      border: 0;
+      flex: 1 0 30%;
+      padding: 0 0 0 50px;
+      text-align: initial;
+
+      [dir="rtl"] & { padding: 0 50px 0 0; }
+    }
+
+    border-top: 1px solid $low-contrast-border-color;
+    flex: 1;
+    padding: 30px 0;
+    text-align: center;
+
+    &-title {
+      font-size: 18px;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  &-comments {
+    @include desktop { margin-bottom: 0; }
+    margin-bottom: 20px;
+  }
+}
--- a/styles/_recent-activity.scss
+++ b/styles/_recent-activity.scss
@@ -0,0 +1,101 @@
+/***** Recent activity *****/
+
+.recent-activity {
+  &-header {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  &-list { padding: 0; }
+
+  &-item {
+    border-bottom: 1px solid $low-contrast-border-color;
+    overflow: auto;
+    padding: 20px 0;
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  &-item-parent {
+    font-size: $font-size-bigger;
+    font-weight: 600;
+  }
+
+  &-item-parent,
+  &-item-link {
+    @include tablet {
+      width: 70%;
+      margin: 0;
+    }
+
+    margin: 6px 0;
+    display: inline-block;
+    width: 100%;
+  }
+
+  &-item-link {
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-item-meta {
+    color: $text_color;
+    @include tablet {
+      margin: 0;
+      float: right;
+
+      [dir="rtl"] & { float: left; }
+
+    }
+
+    margin: 15px 0 0 0;
+    float: none;
+  }
+
+  &-item-time,
+  &-item-comment {
+    display: inline-block;
+    font-size: $font-size-small;
+  }
+
+  &-item-comment {
+    padding-left: 5px;
+
+    [dir="rtl"] & { padding: 0 5px 0 0; }
+
+    &::before {
+      display: inline-block;
+    }
+  }
+
+  &-controls {
+    padding-top: 15px;
+    @include standalone-link;
+  }
+
+  &-accessibility-label {
+    @include visually-hidden;
+  }
+
+  &-comment-icon {
+    svg {
+      vertical-align: middle;
+      color: $brand_color;
+      width: 16px;
+      height: 16px;
+    }
+
+    &:after {
+      content: attr(data-comment-count);
+      margin-left: 3px;
+      
+      [dir="rtl"] & {
+        margin-left: 0;
+        margin-right: 3px;
+      }
+    }
+  }
+}
--- a/styles/_request.scss
+++ b/styles/_request.scss
@@ -0,0 +1,183 @@
+/***** Request *****/
+.request {
+  &-container {
+    @include desktop {
+      align-items: flex-start;
+      flex-direction: row;
+    }
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .comment-container {
+      min-width: 0;
+    }
+  }
+
+  &-breadcrumbs {
+    @include desktop { margin-bottom: 60px; }
+    margin-bottom: 40px;
+  }
+
+  &-main {
+    flex: 1 0 auto;
+    order: 1;
+
+    .comment-fields, .request-submit-comment {
+      display: none;
+    }
+
+    .comment-fields.shown { display: block; }
+    .request-submit-comment.shown { display: inline; }
+
+    @include desktop {
+      flex: 0 0 66%; // 4% spacing
+      order: 0;
+      min-width: 0; // Tricky detail to show truncated text https://css-tricks.com/flexbox-truncated-text/
+    }
+
+    .comment-form-controls {
+      display: block;
+    }
+    .comment-ccs { display: block; }
+
+    .comment-show-container {
+      border-radius: 2px;
+      border: 1px solid $low-contrast-border-color;
+      color: $secondary-text-color;
+      text-align: inherit;
+      padding: 8px 25px;
+      width: 100%;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .form-field.comment-ccs {
+      & > ul {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0;
+
+        &[data-hc-focus="true"] {
+          border: 1px solid $brand_color;
+        }
+      }
+
+      & > input[type="text"] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0;
+      }
+    }
+
+    .comment-ccs + textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: 0;
+
+      &:focus {
+        border-top: 1px solid $brand_color;
+      }
+    }
+
+    input#mark_as_solved { display: none; }
+  }
+
+  &-title {
+    @include desktop {
+      border-bottom: 1px solid $low-contrast-border-color;
+      margin-bottom: 0;
+      max-width: 66%; //Same as main container
+      padding-bottom: 20px;
+    }
+
+    width: 100%;
+  }
+
+  &-sidebar {
+    @include desktop {
+      background-color: $primary-shade;
+      border: 0;
+      font-size: $font-size-small;
+      flex: 0 0 auto;
+      padding: 0 20px;
+      width: 30%; //IE11 fix
+    }
+
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
+    flex: 1 0 auto;
+    order: 0; //Bring to top
+
+    h2 {
+      @include desktop {
+        display: none;
+      }
+
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+      position: relative;
+    }
+  }
+
+  &-details {
+    border-bottom: 1px solid $low-contrast-border-color;
+    font-size: 0; // To remove whitespace and do a 40%/60% split
+    margin: 0;
+    padding-bottom: 20px;
+
+    &:last-child { border: 0; }
+
+    dt, dd {
+      display: inline-block;
+      vertical-align: top;
+      font-size: $font-size-small;
+      margin: 20px 0 0 0;
+    }
+
+    dd {
+      padding: 0 10px;
+      width: 60%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &::after {
+        content: "\A";
+        white-space: pre;
+      }
+    }
+
+    dt {
+      line-break: strict;
+      color: $secondary-text-color;
+      width: 40%;
+    }
+
+    .request-collaborators {
+      display: inline-block;
+    }
+  }
+
+  &-attachments {
+    dt, dd {
+      width: 100%;
+    }
+
+    dd {
+      margin: 10px 0 0 0;
+    }
+  }
+
+  &-form textarea {
+    min-height: 120px;
+  }
+
+  &-follow-up {
+    padding-top: 20px;
+  }
+}
--- a/styles/_search.scss
+++ b/styles/_search.scss
@@ -0,0 +1,163 @@
+/***** Search field *****/
+
+$icon-color: #777;
+$padding-left: 40px;
+$padding-right: 20px;
+
+.search-container {
+  position: relative;
+}
+
+.search {
+  border-color: $high-contrast-border-color;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  position: relative;
+  transition: $input-transition;
+
+  &:focus-within {
+    border-color: $brand_color;
+  }
+
+  input[type="search"], 
+  .clear-button {
+    background-color: #fff;
+    border-radius: 30px;
+    border: none;
+  }
+
+  &-full input[type="search"], 
+  &-full .clear-button {
+    border-color: #fff;
+  }
+
+  input[type="search"] {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    color: $field-text-color;
+    flex: 1 1 auto;
+    height: 40px;
+    width: 100%;
+
+    &:focus {
+      color: $field-text-focus-color;
+    }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover, 
+    &:-webkit-autofill:focus {
+      -webkit-box-shadow: 0 0 0 1000px #fff inset;
+    }
+
+  }
+
+  .clear-button {
+    align-items: center;
+    box-sizing: border-box;
+    color: $icon-color;
+    cursor: pointer;
+    display: none;
+    flex: none;
+    justify-content: center;
+    padding: 0 15px;
+
+    &:hover {
+      background-color: $brand_color;
+      color: #fff;
+    }
+
+    &:focus {
+      @include focus-ring;
+    }
+
+  }
+
+  &-has-value .clear-button {
+    display: flex;
+  }
+
+}
+
+[dir="ltr"] .search {
+  input[type="search"] {
+    padding-left: $padding-left;
+    padding-right: $padding-right;
+  }
+
+  &-has-value input[type="search"] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-color: transparent;
+
+    &:focus {
+      border-right-color: $brand_color;
+    }
+
+  }
+
+  .clear-button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-color: transparent;
+
+    &:focus {
+      border-left-color: $brand_color;
+    }
+    
+  }
+}
+
+[dir="rtl"] .search {
+  input[type="search"] {
+    padding-left: $padding-right;
+    padding-right: $padding-left;
+  }
+
+  &-has-value input[type="search"] {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-color: transparent;
+
+    &:focus {
+      border-left-color: $brand_color;
+    }
+
+  }
+
+  .clear-button {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-color: transparent;
+
+    &:focus {
+      border-right-color: $brand_color;
+    }
+
+  }
+}
+
+.search-icon {
+  @include vertical-align;
+  position: absolute;
+  left: 15px;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  color: $icon-color;
+  pointer-events: none;
+
+  [dir="rtl"] & {
+    left: auto;
+    right: 15px;
+  }
+}
--- a/styles/_search_results.scss
+++ b/styles/_search_results.scss
@@ -0,0 +1,256 @@
+/***** Search results *****/
+.search-results {
+  @include desktop {
+    flex-direction: row;
+  }
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &-column {
+    @include desktop {
+      flex: 0 0 75%;
+    }
+
+    flex: 1;
+  }
+
+  &-sidebar {
+    border-top: 1px solid $low-contrast-border-color;
+    flex: 1 0 auto;
+    margin-bottom: 20px;
+    padding: 0;
+
+    @include desktop {
+      border: 0;
+      flex: 0 0 20%;
+      height: auto;
+    }
+
+    .sidenav-item {
+      border-radius: 4px;
+      padding: 10px 36px;
+      margin-bottom: 4px;
+      color: $text_color;
+
+      &:hover,
+      &.current {
+        background-color: #e9ebed;
+        text-decoration: none;
+      }
+    }
+
+    .sidenav-subitem {
+      unicode-bidi: embed;
+    }
+
+    .sidenav-tag {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-grow: 0;
+
+      .content-tag {
+        background: #E9EBED;
+        border-radius: 4px;
+        padding: 4px 12px;
+        text-decoration: none;
+
+        .label {
+          font-style: normal;
+          font-weight: 600;
+          font-size: 12px;
+          line-height: 24px;
+          text-align: center;
+          letter-spacing: -0.000427656px;
+          color: #49545C;
+          flex-grow: 0;
+          vertical-align: middle;
+          display: inline-block;
+        }
+
+        .close-icon {
+          color: #555555;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+    }
+
+    .collapsible-sidebar {
+      margin-bottom: 30px;
+
+      &[aria-expanded="false"] {
+        .multibrand-filter-list {
+          display: none;
+          @include desktop { display: block; }
+        }
+      }
+    }
+
+    .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
+      display: none;
+    }
+
+    .multibrand-filter-list .doc-count {
+      color: $field-text-color;
+    }
+
+    .see-all-filters {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: block;
+      padding: 10px;
+      color: $link_color;
+
+      &[aria-hidden="true"] {
+        display: none;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &::after {
+        content: ' \2304';
+        font-weight: bold;
+      }
+    }
+  }
+
+  &-subheading {
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
+  }
+
+  &-list {
+    margin-bottom: 25px;
+    > li {
+      padding: 20px 0;
+      &:first-child {
+        border-top: 1px solid $low-contrast-border-color;
+      }
+    }
+  }
+
+  .no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 4rem;
+
+    .headline {
+      color: #2F3941;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 24px;
+      letter-spacing: -0.45px;
+    }
+
+    .action-prompt {
+      color: #68737D;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.154px;
+
+      a {
+        color: $link_color;
+
+        &:visited {
+          color: $link_color;
+        }
+      }
+    }
+  }
+}
+
+.search-result {
+  &-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-title {
+    font-size: $font-size-bigger;
+    margin-bottom: 0;
+  }
+
+  &-votes,
+  &-meta-count {
+    color: $secondary-text-color;
+    font-size: $font-size-small;
+
+    &-icon {
+      color: $brand_color;
+      vertical-align: middle;
+      width: 13px;
+      height: 13px;
+    }
+
+    [dir="ltr"] & {
+      margin-left: 20px;
+    }
+
+    [dir="rtl"] & {
+      margin-right: 20px;
+    }
+  }
+
+  &-meta-container {
+    color: #666;
+    display: flex;
+    flex-direction: column;
+
+    @include desktop {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    nav {
+      @include desktop { flex: 1; }
+    }
+
+    .meta-data {
+      [dir="ltr"] & {
+        @include desktop { margin-left: 20px; }
+      }
+
+      [dir="rtl"] & {
+        @include desktop { margin-right: 20px; }
+      }
+
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  &-breadcrumbs {
+    margin: 0;
+  }
+
+  &-description {
+    margin-top: 10px;
+    margin-bottom: 0;
+    word-break: break-word;
+  }
+}
+
+/* By default use bold instead of italic to highlight */
+.search-results-description em {
+  font-style: normal;
+  font-weight: bold;
+}
+
+/* Add a yellow background for Chinese */
+html[lang|="zh"] {
+  .search-results-description em {
+    font-style: normal;
+    background: yellow;
+  }
+}
--- a/styles/_section.scss
+++ b/styles/_section.scss
@@ -0,0 +1,54 @@
+/***** Section pages *****/
+.section {
+  &-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-content {
+    @include desktop {
+      flex: 0 0 80%;
+    }
+    flex: 1;
+    max-width: 100%
+  }
+
+  &-subscribe button {
+    @extend .button;
+    &[data-selected="true"] {
+      @extend .button-primary;
+    }
+  }
+}
+
+.section-list {
+  margin: 40px 0;
+}
+
+.section-list-item {
+  border-bottom: 1px solid $low-contrast-border-color;
+  font-size: $font-size-bigger;
+  padding: 15px 0;
+
+  &:first-child {
+    border-top: 1px solid $low-contrast-border-color;
+  }
+
+  a {
+    align-items: center;
+    color: $text_color;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.see-all-sections-trigger {
+  cursor: pointer;
+  display: block;
+  padding: 15px;
+  text-align: center;
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+}
--- a/styles/_service_catalog.scss
+++ b/styles/_service_catalog.scss
@@ -0,0 +1,3 @@
+.service-catalog-description {
+  @include content-body;
+}
--- a/styles/_share.scss
+++ b/styles/_share.scss
@@ -0,0 +1,29 @@
+/***** Social share links *****/
+
+.share {
+  padding: 0;
+  white-space: nowrap;
+}
+
+.share li, .share a {
+  display: inline-block;
+}
+
+.share li {
+  height: 25px;
+  width: 25px;
+}
+
+.share a {
+  color: $secondary-text-color;
+  &:hover {
+    text-decoration: none;
+    color: $brand_color;
+  }
+  
+  & svg {
+    height: 18px;
+    width: 18px;
+    display: block;  
+  }
+}
--- a/styles/_split_button.scss
+++ b/styles/_split_button.scss
@@ -0,0 +1,54 @@
+/***** Split button *****/
+.split-button {
+  display: flex;
+}
+
+.split-button button:hover {
+  @extend .button-primary;
+}
+
+.split-button button {
+  @extend .button;
+  background-color: $brand_color;
+  border: 0;
+  color: $brand_text_color;
+  height: 32px;
+  line-height: 16px;
+  outline-color: $brand_color;
+}
+
+.split-button button:not(:only-child) {
+  &:first-child {
+    [dir="rtl"] & {
+      border-left: 1px solid $brand_text_color;
+      border-top-left-radius: unset;
+      border-bottom-left-radius: unset;
+    }
+
+    [dir="ltr"] & {
+      border-right: 1px solid $brand_text_color;
+      border-top-right-radius: unset;
+      border-bottom-right-radius: unset;
+    }
+  }
+
+  &:last-child {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 26px;
+    min-width: 26px;
+    max-width: 26px;
+    padding: 0;
+
+    [dir="rtl"] & {
+      border-top-right-radius: unset;
+      border-bottom-right-radius: unset;
+    }
+
+    [dir="ltr"] & {
+      border-top-left-radius: unset;
+      border-bottom-left-radius: unset;
+    }
+  }
+}
--- a/styles/_status-label.scss
+++ b/styles/_status-label.scss
@@ -0,0 +1,86 @@
+/***** Status labels *****/
+/* Styles labels used in posts, articles and requests */
+.status-label {
+  background-color: #038153;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: $font-weight-semibold;
+  margin-right: 2px;
+  padding: 3px 10px;
+  vertical-align: middle;
+  white-space: nowrap;
+  display: inline-block;
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &-pinned,
+  &-featured,
+  &-official {
+    background-color: $brand_color;
+  }
+
+  &-official {
+    border-radius: 0;
+    margin-right: 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 100%;
+
+    @include tablet {
+      border-radius: 0 0 4px 4px;
+      right: 30px;
+      width: auto;
+    }
+
+    [dir="rtl"] & {
+      left: 30px;
+      right: auto;
+    }
+  }
+
+  &-not-planned,
+  &-closed {
+    background-color: #e9ebed;
+    color: $secondary-text-color;
+  }
+
+  &-pending,
+  &-pending-moderation {
+    background-color: #1f73b7;
+    text-align: center;
+  }
+
+  &-open {
+    background-color: #c72a1c;
+  }
+
+  &-solved {
+    background-color: #68737d;
+  }
+
+  &-new {
+    background-color: #ffb648;
+    color: #703b15;
+  }
+
+  &-hold {
+    background-color: #000;
+  }
+
+  &-request {
+    @include mobile {
+      max-width: 150px;
+    }
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
--- a/styles/_striped_list.scss
+++ b/styles/_striped_list.scss
@@ -0,0 +1,73 @@
+/***** Striped list *****/
+/* Used in community posts list and requests list */
+.striped-list {
+  padding: 0;
+
+  &-item {
+    @include tablet {
+      align-items: center;
+      flex-direction: row;
+    }
+
+    align-items: flex-start;
+    border-bottom: 1px solid $low-contrast-border-color;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 20px 0;
+  }
+
+  &-info {
+    flex: 2;
+  }
+
+  &-title {
+    color: $link_color;
+    margin-bottom: 10px;
+    margin-right: 5px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+
+    &:visited { color: $visited_link_color; }
+  }
+
+  .meta-group {
+    margin: 5px 0;
+  }
+
+  &-count {
+    @include tablet {
+      display: flex;
+      flex: 1;
+      justify-content: space-around;
+    }
+
+    color: $secondary-text-color;
+    font-size: $font-size-small;
+    justify-content: flex-start;
+    text-transform: capitalize;
+  }
+  &-count-item {
+    &::after {
+      @include tablet { display: none; }
+
+      content: "·";
+      display: inline-block;
+      padding: 0 5px;
+    }
+
+    &:last-child::after { display: none; }
+  }
+
+  &-number {
+    @include tablet {
+      color: $text_color;
+      display: block;
+    }
+    text-align: center;
+  }
+}
--- a/styles/_sub-nav.scss
+++ b/styles/_sub-nav.scss
@@ -0,0 +1,34 @@
+.sub-nav {
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 15px 30px;
+  justify-content: space-between;
+  margin-bottom: 55px;
+
+  @include tablet {
+    flex-direction: row;
+  }
+
+  // Inner pages breadcrumbs
+  .breadcrumbs {
+    margin: 0;
+  }
+
+  // Inner pages search field
+  .search-container {
+    max-width: 300px;
+    width: 100%;
+
+    @include tablet {
+      flex: 0 1 300px;
+    }
+  }
+
+  input[type="search"] {
+    &::after { 
+      font-size: $font-size-base; 
+    }
+  }
+}
--- a/styles/_summary.scss
+++ b/styles/_summary.scss
@@ -0,0 +1,14 @@
+/***** Summary component *****/
+zd-summary-block {
+    // As the Help Center already provides the base styling in a theme agnostic
+    // way, we will only override the colors here.
+    background: #f3f6f6;
+
+    [dir="ltr"] & {
+        border-left-color: #859fa1;
+    }
+
+    [dir="rtl"] & {
+        border-right-color: #859fa1;
+    }
+}
--- a/styles/_tables.scss
+++ b/styles/_tables.scss
@@ -0,0 +1,44 @@
+/***** Tables *****/
+.table {
+  @include tablet { table-layout: auto; }
+
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  th,
+  th a {
+    color: $secondary-text-color;
+    font-size: $font-size-small;
+    text-align: left;
+
+    [dir="rtl"] & { text-align: right; }
+  }
+
+  tr {
+    @include tablet { display: table-row; }
+
+    border-bottom: 1px solid $low-contrast-border-color;
+    display: block;
+    padding: 20px 0;
+  }
+
+  td {
+    @include tablet {
+      display: table-cell;
+    }
+
+    display: block;
+  }
+
+  td, th {
+    @include desktop {
+      padding: 20px 30px;
+    }
+    @include tablet {
+      padding: 10px 20px;
+      height: 60px;
+    }
+  }
+}
--- a/styles/_upload_dropzone.scss
+++ b/styles/_upload_dropzone.scss
@@ -0,0 +1,4 @@
+/***** Upload Dropzone *****/
+.upload-dropzone {
+  border: 1px solid $high-contrast-border-color;
+}
--- a/styles/_user-profiles.scss
+++ b/styles/_user-profiles.scss
@@ -0,0 +1,622 @@
+/* User Profiles */
+
+// Header
+
+.profile-header {
+  padding: 30px 0;
+  background-color: $primary-shade;
+}
+
+.profile-header .container {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include tablet {
+    flex-wrap: nowrap;
+  }
+}
+
+.profile-header .profile-info {
+  flex-basis: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.profile-avatar {
+  position: relative;
+  line-height: 0;
+  align-self: center;
+  margin-right: 10px;
+
+  [dir="rtl"] & {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+}
+
+.profile-avatar .user-avatar {
+  width: 80px;
+  height: 80px;
+}
+
+.profile-avatar .icon-agent {
+  bottom: 0;
+  right: 0;
+}
+
+.profile-header .basic-info {
+  @include text-overflow;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+
+  .name {
+    margin: 0;
+    line-height: 25px;
+    vertical-align: middle;
+    display: inline;
+  }
+}
+
+.profile-header .options {
+  display: flex;
+  flex-basis: 100%;
+  margin-top: 12px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+
+  @include tablet {
+    flex-wrap: nowrap;
+    flex-basis: auto;
+    margin-top: 0;
+    margin-left: 10px;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: 10px;
+    }
+
+    > :not(:last-child) {
+      margin-bottom: 0;
+      margin-right: 10px;
+
+      [dir="rtl"] & {
+        margin-left: 10px;
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.user-profile-actions {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+.profile-header .description {
+  @include text-overflow;
+  margin: 15px 0;
+  flex-basis: 100%;
+}
+
+// Stats
+
+.profile-stats {
+  font-size: $font-size-small;
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+}
+
+.profile-stats .stat {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.profile-stats .stat-label {
+  color: $secondary-text-color;
+  flex: 0 0 100px;
+  margin-right: 10px;
+
+  [dir="rtl"] & {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+}
+
+.profile-stats-activity {
+  border-top: solid 1px #ddd;
+  margin-top: 15px;
+
+  @include tablet {
+    border-top: 0;
+    flex-direction: row;
+  }
+}
+
+.profile-stats-activity .stat {
+  @include tablet {
+    flex-direction: column;
+  }
+}
+
+.profile-stats-activity .stat:first-child {
+  margin-top: 10px;
+
+  @include tablet {
+    margin-top: 0;
+  }
+}
+
+.profile-stats-activity .stat:not(:last-child) {
+  @include tablet {
+    margin-right: 40px;
+
+    [dir="rtl"] & {
+      margin-left: 40px;
+      margin-right: 0;
+    }
+  }
+}
+
+.profile-stats-activity .stat-label {
+  @include tablet {
+    flex: 0 1 auto;
+  }
+}
+
+.profile-stats-counters {
+  border-bottom: solid 1px #ddd;
+
+  @include tablet {
+    flex: 0 0 200px;
+    border-bottom: 0;
+    margin-left: 40px;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: 40px;
+    }
+  }
+
+  @include desktop {
+    flex: 0 0 270px;
+    margin-left: 60px;
+
+    [dir="rtl"] & {
+      margin-right: 60px;
+      margin-left: 0;
+    }
+  }
+}
+
+.profile-stats-counters .stat {
+  @include tablet {
+    flex-direction: column;
+  }
+
+  @include desktop {
+    flex-direction: row;
+  }
+}
+
+.profile-stats-counters .stat:not(:last-child) {
+  @include tablet {
+    margin-bottom: 15px;
+  }
+}
+
+.profile-stats-counters .stat-label {
+  @include tablet {
+    flex: 0 1 auto;
+  }
+
+  @include desktop {
+    flex: 0 0 100px;
+  }
+}
+
+.profile-private-badge {
+  flex-basis: 100%;
+  border: solid 1px $brand_color;
+  border-radius: 4px;
+  color: $brand_color;
+  padding: 5px 20px;
+  font-size: 12px;
+  text-align: center;
+
+  .profile-private-icon {
+    margin-left: 5px;
+    line-height: 15px;
+  }
+
+  @include tablet {
+    flex-basis: auto;
+  }
+}
+
+// Navigation
+
+.profile-nav {
+  background-color: $secondary-shade;
+  margin-bottom: 37px;
+}
+
+// Sections
+
+.profile-section {
+  width: 100%;
+
+  @include desktop {
+    width: calc(100% - 330px);
+  }
+}
+
+.profile-section-header {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.profile-section-title {
+  flex-basis: 100%;
+  margin-bottom: 0;
+}
+
+.profile-section-description {
+  flex-basis: 100%;
+  padding: 10px 0;
+  color: $secondary-text-color;
+  font-size: $font-size-small;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @include tablet {
+    flex: 1 0 50%;
+    padding-bottom: 0;
+  }
+}
+
+.profile-section-sorter {
+  flex-basis: 100%;
+  border-top: solid 1px #eee;
+  font-size: $font-size-small;
+
+  .dropdown-toggle {
+    padding: 10px 0;
+    width: 100%;
+  }
+
+  .dropdown-toggle::after {
+    position: absolute;
+    right: 0;
+
+    [dir="rtl"] & {
+      left: 0;
+      right: initial;
+    }
+
+    @include tablet {
+      position: relative;
+    }
+  }
+
+  @include tablet {
+    flex: 0 1 auto;
+    padding-top: 0;
+    border-top: 0;
+    margin-left: 20px;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+}
+
+// Profile badges
+
+.profile-badges {
+  &-items {
+    margin-top: 25px;
+  }
+
+  &-item {
+    border-top: 1px solid $low-contrast-border-color;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 27px 12px;
+
+    & > div {
+      padding-right: 12px;
+      padding-left: 12px;
+    }
+
+    &-image {
+      height: 40px;
+      width: 40px;
+      margin-right: 12px;
+
+      img {
+        max-height: 40px;
+      }
+
+      [dir="rtl"] & {
+        margin-left: 12px;
+        margin-right: 0;
+      }
+    }
+
+    &-title,
+    &-metadata-title {
+      font-size: $font-size-base;
+      margin-bottom: 10px;
+    }
+
+    &-title {
+      font-weight: $font-weight-semibold;
+    }
+
+    &-description,
+    &-metadata-description {
+      color: $secondary-text-color;
+      font-size: $font-size-small;
+      margin: 0;
+    }
+
+    &-metadata {
+      margin-left: auto;
+      text-align: right;
+
+      [dir="rtl"] & {
+        margin-left: 0;
+        margin-right: auto;
+        text-align: left;
+      }
+    }
+  }
+}
+
+// Profile contribution
+
+.profile-contribution {
+  @include text-overflow;
+  padding: 20px 0;
+  position: relative;
+}
+
+.profile-contribution-header {
+  margin-bottom: 5px;
+}
+
+.profile-contribution-title {
+  margin: 0 0 5px 0;
+  display: inline;
+  line-height: 21px;
+  font-size: 15px;
+  vertical-align: middle;
+}
+
+.profile-contribution-body {
+  margin: 10px 0;
+}
+
+// Profile contribution list
+
+.profile-contribution-list > .profile-contribution {
+  border-top: 1px solid #eee;
+
+  @include tablet {
+    padding-left: 30px;
+
+    [dir="rtl"] & {
+      padding-right: 30px;
+      padding-left: 0;
+    }
+  }
+}
+
+.profile-contribution-list > .profile-contribution:last-child {
+  border-bottom: 1px solid #eee;
+}
+
+.profile-contribution-icon {
+  left: 0;
+  position: absolute;
+  color: #ccc;
+  line-height: 25px;
+
+  [dir="rtl"] & {
+    right: 0;
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+}
+
+.profile-contribution-list .profile-contribution-header {
+  margin-left: 30px;
+
+  [dir="rtl"] & {
+    padding-right: 30px;
+    padding-left: 0;
+  }
+
+  @include tablet {
+    margin-left: 0;
+
+    [dir="rtl"] & {
+      padding-right: 0;
+    }
+  }
+}
+
+.profile-comments .profile-contribution-breadcrumbs {
+  margin-left: 30px;
+
+  [dir="rtl"] & {
+    padding-right: 30px;
+    padding-left: 0;
+  }
+
+  @include tablet {
+    margin-left: 0;
+
+    [dir="rtl"] & {
+      padding-right: 0;
+    }
+  }
+}
+
+// Empty state
+
+.profile-section .no-activity,
+.profile-section .private-activity {
+  display: block;
+  margin-top: 40px;
+  color: #999;
+}
+
+.private-activity-icon {
+  margin-right: 10px;
+
+  [dir="rtl"] & {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+}
+
+// Activity List
+
+.profile-activity-list {
+  margin-top: 25px;
+}
+
+.profile-activity {
+  position: relative;
+  padding-bottom: 30px;
+
+  @include tablet {
+    padding-left: 20px;
+
+    [dir="rtl"] & {
+      padding-right: 20px;
+      padding-left: 0;
+    }
+  }
+}
+
+.profile-activity:not(:last-child) {
+  @include tablet {
+    border-left: 1px solid #ddd;
+
+    [dir="rtl"] & {
+      border-left: 0;
+      border-right: 1px solid #ddd;
+    }
+  }
+}
+
+.profile-activity-header {
+  display: flex;
+  align-items: center;
+  margin-left: 35px;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: 35px;
+  }
+
+  @include tablet {
+    margin-left: 0;
+
+    [dir="rtl"] & {
+      margin-right: 0;
+    }
+  }
+}
+
+.profile-activity-header .user-avatar {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  min-width: 40px;
+  align-self: flex-start;
+
+  [dir="rtl"] & {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+}
+
+.profile-activity-description {
+  @include text-overflow;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+}
+
+.profile-activity-description span:first-child {
+  font-weight: $font-weight-semibold;
+  display: inline;
+}
+
+.profile-activity-contribution {
+  padding: 20px;
+  margin-top: 10px;
+  border-radius: 8px;
+  background-color: $primary-shade;
+
+  @include tablet {
+    margin-top: 0;
+    margin-left: 50px;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: 50px;
+    }
+  }
+}
+
+// Icons
+
+.profile-activity-icon {
+  position: absolute;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
+  background-color: $background_color;
+  background-position: 50% 50%;
+  text-align: center;
+  color: #ccc;
+
+  [dir="rtl"] & {
+    right: 0;
+  }
+
+  @include tablet {
+    left: -14px;
+
+    [dir="rtl"] & {
+      right: -14px;
+    }
+  }
+}
+
+.profile-activity-icon svg {
+  @include vertical-align;
+  // display: block;
+  width: 1em;
+  height: 1em;
+  margin: auto;
+}
--- a/styles/_user.scss
+++ b/styles/_user.scss
@@ -0,0 +1,76 @@
+/***** User info in header *****/
+.user-info {
+  display: inline-block;
+
+  .dropdown-toggle::after {
+    @include tablet { display: inline-block;}
+    display: none;
+  }
+
+  > button {
+    border: 0;
+    color: $link_color;
+    min-width: 0;
+    padding: 0;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus {
+      color: $link_color;
+      background-color: transparent;
+    }
+
+    &::after {
+      color: $link_color;
+      padding-right: 15px;
+
+      [dir="rtl"] & {
+        padding-left: 15px;
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+// Selector is this strong to override the styles set with ids
+#user #user-name {
+  @include tablet { display: inline-block; }
+  display: none;
+  font-size: 14px;
+
+  &:hover { text-decoration: underline; }
+}
+
+/***** User avatar *****/
+.user-avatar {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.avatar {
+  display: inline-block;
+  position: relative;
+
+  img {
+    height: 40px;
+    width: 40px;
+  }
+
+  .icon-agent {
+    color: $brand_color;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    bottom: -4px;
+    background-color: $brand_text_color;
+    font-size: 17px;
+    height: 17px;
+    line-height: 17px;
+    position: absolute;
+    right: -2px;
+    text-align: center;
+    width: 17px;
+  }
+}
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -0,0 +1,34 @@
+// Variables
+
+// Colors
+$hover-button-color: zass-darken($brand_color, 20%);
+$secondary-text-color: zass-lighten($text_color, 20%);
+
+$primary-shade: zass-darken($background_color, 3%); //#f8f8f8 for the default background_color
+$secondary-shade: zass-darken($background_color, 5%); //#f2f2f2 for the default background_color
+
+$font-size-bigger: 16px;
+$font-size-base: 15px;
+$font-size-navigation: 14px;
+$font-size-small: 13px;
+$font-size-smaller: 11px;
+
+$high-contrast-border-color: #87929D; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
+$low-contrast-border-color: #ddd; // less than 3:1 contrast ratio with default background color. Use for elements that do not require user interaction
+$menu-border-color: #d8dcde;
+
+$button-color: $brand_color;
+
+$input-font-size: 14px;
+$field-text-color: #666;
+$field-text-focus-color: #555;
+
+// Breakpoints variables
+$tablet-width: 768px;
+$desktop-width: 1024px;
+$max-width-container: 1160px;
+
+$font-weight-semibold: 600;
+
+// Transitions
+$input-transition: border .12s ease-in-out;
--- a/styles/_vote.scss
+++ b/styles/_vote.scss
@@ -0,0 +1,57 @@
+/***** Vote *****/
+/* Used in article comments, post comments and post */
+.vote {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  a {
+    &:active,
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+.vote-sum {
+  color: $secondary-text-color;
+  display: block;
+  margin: 3px 0;
+
+  [dir="rtl"] & {
+    direction: ltr;
+    unicode-bidi: bidi-override;
+  }
+}
+
+.vote-up svg {
+  transform: scale(1, -1);
+}
+
+.vote-up:hover,
+.vote-down:hover {
+  color: $brand_color;
+}
+
+.vote-up, .vote-down {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  color: $secondary-text-color;
+  cursor: pointer;
+  min-height: 35px;
+  min-width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vote-voted {
+  color: $brand_color;
+}
+
+.vote-voted:hover {
+  color: $hover-button-color;
+}
--- a/styles/_wysiwyg.scss
+++ b/styles/_wysiwyg.scss
@@ -0,0 +1,4 @@
+/***** WYSIWYG Editor *****/
+#hc-wysiwyg {
+  border: 1px solid $high-contrast-border-color;
+}
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -0,0 +1,47 @@
+@import "normalize";
+@import "variables";
+@import "mixins";
+@import "base";
+@import "buttons";
+@import "split_button";
+@import "tables";
+@import "forms";
+@import "header";
+@import "user";
+@import "footer";
+@import "breadcrumbs";
+@import "search";
+@import "hero";
+@import "page_header";
+@import "sub-nav";
+@import "blocks";
+@import "home-page";
+@import "recent-activity";
+@import "category";
+@import "section";
+@import "article";
+@import "attachments";
+@import "share";
+@import "comments";
+@import "vote";
+@import "actions";
+@import "community";
+@import "striped_list";
+@import "status-label";
+@import "post";
+@import "community_badge";
+@import "collapsible-nav";
+@import "collapsible-sidebar";
+@import "my-activities";
+@import "request";
+@import "pagination";
+@import "metadata";
+@import "user-profiles";
+@import "search_results";
+@import "notifications";
+@import "dropdowns";
+@import "content-tags";
+@import "wysiwyg";
+@import "upload_dropzone";
+@import "summary";
+@import "service_catalog";
--- a/styles/normalize.css
+++ b/styles/normalize.css
@@ -0,0 +1,183 @@
+/***** Normalize.css *****/
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: transparent;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}