first commit

2025-06-17 11:53:18 +02:00
commit 9f0f7ba12b
8804 changed files with 1369176 additions and 0 deletions
--- a/media/templates/site/cassiopeia/scss/blocks/_alerts.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_alerts.scss
@ -0,0 +1,25 @@
+// Alerts
+
+.j-main-container {
+  .alert {
+    margin: .75rem;
+  }
+
+}
+
+.alert-heading {
+  font-size: $h4-font-size;
+}
+
+@keyframes fadeIn {
+
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_back-to-top.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_back-to-top.scss
@ -0,0 +1,29 @@
+/**
+* Back to Top
+*/
+
+.back-to-top-link {
+  position: absolute;
+  inset-inline-end: 1rem;
+  bottom: 1rem;
+  z-index: 10000;
+  padding: $cassiopeia-grid-gutter * .5;
+  color: var(--cassiopeia-color-primary, $standard-color-primary);
+  pointer-events: all;
+  background-color: var(--white, $white);
+  border: 1px solid var(--cassiopeia-color-primary, $standard-color-primary);
+  border-radius: $border-radius;
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--white, $white);
+    background-color: var(--cassiopeia-color-hover);
+    border-color: var(--white, $white);
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_banner.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_banner.scss
@ -0,0 +1,47 @@
+// Banner
+
+.container-banner {
+  img {
+    display: block;
+    margin: auto;
+  }
+
+  .banner-overlay {
+    height: 70vh;
+    color: $white;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: top,center;
+    background-size: cover;
+
+    .overlay {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: $cassiopeia-grid-gutter;
+      text-align: center;
+      background-color: hsla(0, 0%, 0%, .5);
+
+      .text-thin {
+        font-weight: $font-weight-lighter;
+        &::after {
+          display: block;
+          width: 30%;
+          height: 4px;
+          margin: 1rem auto 2rem;
+          content: "";
+          background: $white;
+        }
+        .lead {
+          font-size: 150vh;
+        }
+      }
+    }
+
+    @media screen and (max-height: 740px) {
+      height: 100vh;
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_css-grid.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_css-grid.scss
@ -0,0 +1,116 @@
+// CSS Grid
+
+body {
+  display: flex;
+  flex-direction: column;
+
+  &.wrapper-fluid {
+
+    .site-grid {
+      grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
+      grid-gap: 0 ($cassiopeia-grid-gutter*2);
+    }
+
+    .grid-child {
+      max-width: none;
+    }
+
+    header > .grid-child,
+    footer > .grid-child {
+      padding-right: $cassiopeia-grid-gutter*2;
+      padding-left: $cassiopeia-grid-gutter*2;
+    }
+  }
+
+  &:not(.has-sidebar-left) .site-grid .container-component {
+    grid-column-start: main-start;
+  }
+
+  &:not(.has-sidebar-right) .site-grid .container-component {
+    grid-column-end: main-end;
+  }
+}
+
+.site-grid {
+  margin-bottom: auto;
+}
+
+@supports (display: grid) {
+  .site-grid {
+    display: grid;
+    grid-template-areas: ". banner banner banner banner ."
+      ". top-a top-a top-a top-a ."
+      ". top-b top-b top-b top-b ."
+      ". comp comp comp comp ."
+      ". side-r side-r side-r side-r ."
+      ". side-l side-l side-l side-l ."
+      ". bot-a bot-a bot-a bot-a ."
+      ". bot-b bot-b bot-b bot-b .";
+    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
+    grid-gap: 0 $cassiopeia-grid-gutter;
+
+    > [class^="container-"],
+    > [class*=" container-"] {
+      width: 100%;
+      max-width: none;
+      column-gap: $cassiopeia-grid-gutter;
+    }
+
+    > .full-width {
+      grid-column: full-start / full-end;
+    }
+
+    @include media-breakpoint-up(lg) {
+      grid-template-areas: ". banner banner banner banner ."
+        ". top-a top-a top-a top-a ."
+        ". top-b top-b top-b top-b ."
+        ". side-l comp comp side-r ."
+        ". bot-a bot-a bot-a bot-a ."
+        ". bot-b bot-b bot-b bot-b .";
+    }
+  }
+}
+
+.container-banner {
+  grid-area: banner;
+}
+
+.container-top-a {
+  grid-area: top-a;
+}
+
+.container-top-b {
+  grid-area: top-b;
+}
+
+.container-component {
+  grid-area: comp;
+}
+
+.container-sidebar-left {
+  grid-area: side-l;
+}
+
+.container-sidebar-right {
+  grid-area: side-r;
+}
+
+.container-main-top {
+  grid-area: main-t;
+}
+
+.container-main-bottom {
+  grid-area: main-b;
+}
+
+.container-breadcrumbs {
+  grid-area: bread;
+}
+
+.container-bottom-a {
+  grid-area: bot-a;
+}
+
+.container-bottom-b {
+  grid-area: bot-b;
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_footer.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_footer.scss
@ -0,0 +1,40 @@
+// Footer
+
+.footer {
+  margin-top: $cassiopeia-grid-gutter;
+  color: $white;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad #{"/* rtl:"}$cassiopeia-header-grad-rtl #{"*/"};
+
+  .grid-child {
+    align-items: center;
+    justify-content: space-between;
+    padding: 2.5rem ($cassiopeia-grid-gutter * .5);
+  }
+
+  a {
+    color: currentColor;
+  }
+
+  .mod-menu {
+    position: relative;
+  }
+
+  @if $metismenu==true {
+    .metismenu.mod-menu {
+      .mm-collapse {
+        background: var(--cassiopeia-color-primary);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .grid-child {
+      flex-direction: column;
+
+      .mod-footer {
+        margin: .375rem 0;
+      }
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_form.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_form.scss
@ -0,0 +1,150 @@
+// Form
+
+.form-control {
+  max-width: $input-max-width;
+  background-color: $white;
+
+  &.input-xlarge {
+    max-width: 21.875rem;
+  }
+
+  &.input-xxlarge {
+    max-width: 34.375rem;
+  }
+
+  &.input-full {
+    max-width: 100%;
+  }
+}
+
+.spacer hr {
+  width: 23.75rem;
+}
+
+.form-select {
+  max-width: $input-max-width;
+}
+
+// Bootstrap 4 b/c on form-inline
+.form-inline .form-select {
+  display: inline-block;
+  width: auto;
+}
+
+@include media-breakpoint-down(lg) {
+  .form-inline .form-select {
+    width: 100%;
+  }
+}
+
+td .form-control {
+  display: inline-block;
+  width: auto;
+}
+
+.checkboxes {
+  padding-top: 5px;
+
+  .checkbox input {
+    position: static;
+    margin-left: 0;
+  }
+}
+
+.modal label {
+  width: 100%;
+}
+
+// Validation
+.invalid {
+  color: $danger;
+  border-color: $danger;
+}
+
+.valid {
+  border-color: $success;
+}
+
+.form-control-feedback {
+  display: block;
+}
+
+// set up hidden tooltip
+[role="tooltip"]:not(.show) {
+  right: 5em;
+  z-index: $zindex-tooltip;
+  display: none;
+  max-width: 100%;
+  padding: .5em;
+  margin: .5em;
+  color: $black;
+  text-align: start;
+  background: $white;
+  border: 1px solid $gray-600;
+  border-radius: $border-radius;
+  box-shadow: 0 0 .5rem rgba(0, 0, 0, .8);
+
+  &[id^=editarticle-] {
+    right: auto;
+    margin-inline-start: -10em;
+  }
+
+  &[id^=editcontact-] {
+    right: auto;
+    margin-inline-start: -10em;
+  }
+
+  &[id^=id-skip-] {
+    right: auto;
+  }
+
+  &[id^=cbunpublish] {
+    right: auto;
+  }
+}
+
+// reveal associated tooltip on focus
+:focus + [role="tooltip"],
+:hover + [role="tooltip"] {
+  position: absolute;
+  display: block;
+}
+
+.filter-search-bar__description {
+  bottom: 100%;
+}
+
+fieldset {
+  margin-bottom: $cassiopeia-grid-gutter*2;
+  + fieldset {
+    margin-top: $cassiopeia-grid-gutter*2;
+  }
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.control-group {
+  margin: $cassiopeia-grid-gutter 0;
+}
+.container-popup .filter-search-bar__description {
+  top: 100%;
+  bottom: auto;
+}
+
+.com-users-login__options {
+  margin-top: $cassiopeia-grid-gutter*2;
+}
+
+.com-users-profile__edit,
+.com-users-registration {
+  #jform_privacyconsent_privacy,
+  #jform_profile_tos,
+  #jform_terms_terms {
+    .radio {
+      display: inline-flex;
+      gap: 1rem;
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss
@ -0,0 +1,14 @@
+// Frontend Editing
+
+.btn.jmodedit {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
+  z-index: 900;
+  color: var(--#{$prefix}link-color);
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid #58595a;
+  border-radius: .25rem;
+}
+
--- a/media/templates/site/cassiopeia/scss/blocks/_global.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_global.scss
@ -0,0 +1,254 @@
+// Global
+:root {
+  scroll-behavior: smooth;
+  font-size: $font-size-root;
+
+  // Disable smooth scroll when the user has set "prefers-reduced-motion"
+  @media screen and (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+html {
+  background-color: $white;
+}
+
+body {
+  position: relative;
+  min-height: 100vh;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--cassiopeia-font-family-headings, $font-family-sans-serif);
+  font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
+}
+
+.display-1 {
+  font-size: clamp(2.7rem, 8vw, 5.5rem);
+}
+
+.display-2 {
+  font-size: clamp(2.3rem, 7vw, 4.5rem);
+}
+
+.display-3 {
+  font-size: clamp(1.9rem, 6vw, 3.5rem);
+}
+
+.display-4 {
+  font-size: clamp(1.5rem, 5vw, 2.5rem);
+}
+
+.lead {
+  font-size: clamp(1.1rem, 3vw, 1.25rem);
+}
+
+a {
+  color: var(--#{$prefix}link-color);
+
+  &:not([class]) {
+    text-decoration: underline;
+  }
+
+  &:not(.btn):hover,
+  &:not(.btn):focus {
+    color: var(--cassiopeia-color-hover);
+  }
+
+  &.navbar-brand {
+    color: var(--cassiopeia-color-brand);
+  }
+}
+
+.btn-primary {
+  background-color: var(--cassiopeia-color-primary);
+  border-color: var(--cassiopeia-color-primary);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cassiopeia-color-hover);
+    border-color: var(--cassiopeia-color-hover);
+  }
+}
+
+.btn-group {
+  margin-bottom: $cassiopeia-grid-gutter;
+  > input {
+    padding: $cassiopeia-grid-gutter * .5;
+    border: 1px solid $gray-400;
+    @include border-start-radius($border-radius);
+    @include border-end-radius(0);
+  }
+  > .btn-group {
+    margin-bottom: 0;
+  }
+}
+
+.com-content-article {
+  ol,
+  ul {
+    overflow: hidden;
+  }
+}
+
+.com-content-category__pagination {
+  margin-bottom: $cassiopeia-grid-gutter;
+}
+
+small,
+.small {
+  font-size: $font-size-sm;
+}
+
+dd {
+  padding: 0;
+  word-wrap: break-word;
+}
+
+th dd {
+  font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
+}
+
+.com-contact__thumbnail {
+  text-align: left;
+}
+
+@include media-breakpoint-up(xl) {
+  dl.dl-horizontal {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    dt {
+      grid-column-start: 1;
+      grid-column-end: 2;
+    }
+
+    dd {
+      grid-column-start: 2;
+      grid-column-end: 3;
+      padding: 0 0 0 $cassiopeia-grid-gutter;
+      margin-bottom: 0;
+    }
+  }
+
+  .com-contact__container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, auto);
+    grid-gap: 1rem;
+    margin-bottom: $cassiopeia-grid-gutter;
+
+    h3 {
+      grid-column: 1 / 5;
+    }
+
+    .com-contact__thumbnail {
+      grid-column: 3 / 5;
+      grid-row: 2 / 5;
+      margin-bottom: $cassiopeia-grid-gutter;
+      text-align: right;
+    }
+
+    .com-contact__position {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
+    }
+
+    .com-contact__info {
+      grid-column: 1 / 3;
+      grid-row: 3 / 4;
+    }
+  }
+
+  .com-users-profile {
+    dt {
+      min-width: 180px;
+    }
+  }
+}
+
+figure {
+  margin: 0 0 ($cassiopeia-grid-gutter*2);
+  &.float-start {
+    margin-right: $cassiopeia-grid-gutter;
+  }
+  &.float-end {
+    margin-left: $cassiopeia-grid-gutter;
+  }
+}
+
+figcaption {
+  font-size: .9em;
+  color: $gray-600;
+}
+
+.mod-menu {
+  flex-direction: column;
+}
+
+// meter element
+meter {
+  width: 100%;
+}
+
+.pagenavigation,
+.pager {
+  clear: both;
+  .pagination {
+    justify-content: space-between;
+    padding: 0;
+    margin: $cassiopeia-grid-gutter 0;
+
+    .next:only-child {
+      margin-left: auto;
+    }
+  }
+}
+
+.page-link {
+  color: var(--#{$prefix}link-color);
+  &:hover {
+    color: var(--#{$prefix}link-color);
+  }
+}
+
+.pager {
+  .pagination {
+    justify-content: center;
+  }
+}
+
+[dir="rtl"] li.next .page-link {
+  border-top-left-radius: .25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: .25rem;
+}
+
+[dir="rtl"] li.previous .page-link {
+  border-top-left-radius: 0;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: 0;
+}
+
+.article-index {
+  .toclink.active {
+    color: currentColor;
+  }
+}
+
+// Bootstrap 4 b/c
+.sr-only {
+  @extend .visually-hidden;
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_header.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_header.scss
@ -0,0 +1,232 @@
+// Header
+
+.container-header {
+  position: relative;
+  z-index: 10;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad;
+  box-shadow: 0 5px 5px hsla(0, 0%, 0%, .03) inset;
+
+  @include media-breakpoint-down(lg) {
+    position: relative !important;
+  }
+
+  .grid-child {
+    padding: $cassiopeia-grid-gutter * .5;
+  }
+
+  nav {
+    padding: 0;
+    margin-top: $cassiopeia-grid-gutter * .5;
+  }
+
+  .site-description {
+    font-size: 1rem;
+    color: $white;
+    white-space: normal;
+  }
+
+  .navbar-brand {
+    position: relative;
+    display: inline-block;
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+    font-size: 2rem;
+    color: $white;
+    margin-inline-end: auto;
+
+    a {
+      color: $white;
+    }
+
+    &:hover,
+    &:focus {
+      color: scale-color($white, $lightness: -6%);
+    }
+  }
+
+  .container-nav {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: $cassiopeia-grid-gutter;
+
+    @include media-breakpoint-down(md) {
+      .container-search,
+      nav {
+        margin-top: $cassiopeia-grid-gutter;
+      }
+    }
+
+    .container-search:only-child {
+      margin-left: auto;
+    }
+  }
+
+  .navbar-collapse {
+    &.show {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  .mod-menu {
+    flex: 1 0 100%;
+    padding: 0;
+    margin: 0;
+    color: $white;
+    list-style: none;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      flex: 1 1 0%;
+      flex-direction: row;
+    }
+
+    > li {
+      position: relative;
+
+      @include media-breakpoint-up(lg) {
+        + li {
+          margin-left: 1.55em;
+        }
+      }
+
+      > a,
+      > span {
+        position: relative;
+        color: currentColor;
+        text-decoration: none;
+      }
+
+      &::after {
+        @include media-breakpoint-up(lg) {
+          position: absolute;
+          right: 50%;
+          bottom: 0;
+          left: 50%;
+          display: block;
+          height: 2px;
+          margin: auto;
+          content: "";
+          background: transparent;
+          opacity: .2;
+          transition: all .2s ease, background-color .2s ease;
+        }
+      }
+
+      &.active::after,
+      &:hover::after {
+        right: 2px;
+        left: 0;
+        background: $white;
+      }
+
+      @include media-breakpoint-down(lg) {
+        &.active > a,
+        &.active > span,
+        > a:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .parent {
+      > ul {
+        display: none;
+        color: $gray-900;
+      }
+    }
+  }
+
+  @if $metismenu==true {
+    .metismenu > li {
+      + li {
+        margin-left: 0;
+      }
+
+      > a::after,
+      > button::before {
+
+        @include media-breakpoint-up(lg) {
+          position: absolute;
+          right: 50%;
+          bottom: 0;
+          left: 50%;
+          display: block;
+          height: 2px;
+          margin: auto;
+          content: "";
+          background: transparent;
+          opacity: .2;
+          transition: all .2s ease, background-color .2s ease;
+        }
+      }
+
+      > a:hover::after,
+      > button:hover::before,
+      &.active > a::after,
+      &.active > button::before {
+        right: 0;
+        left: 0;
+        background: $white;
+      }
+
+      > button.mm-toggler-link:hover::before,
+      &.active > button.mm-toggler-link::before {
+        right: 0;
+        left: .5em;
+      }
+    }
+
+    .metismenu > li.level-1 {
+      &.active > a,
+      &.active > button,
+      > a:hover,
+      > button:hover {
+
+        @include media-breakpoint-up(lg) {
+          text-decoration: none;
+        }
+      }
+
+      > ul {
+        min-width: 12rem;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    color: $white;
+    cursor: pointer;
+    border: 1px solid $white;
+
+    .fas {
+      font-size: 1.5rem;
+    }
+  }
+
+  .container-search {
+    margin-top: $cassiopeia-grid-gutter * .5;
+  }
+
+  .mod-finder {
+    color: $white;
+
+    a {
+      color: $white;
+
+      &:hover, &:focus {
+        color: darken($white, 10%);
+      }
+    }
+
+    .awesomplete {
+      color: var(--body-color);
+
+      > ul {
+        background: linear-gradient(to bottom right, $white, hsla(0,0%,100%,.9));
+      }
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_icons.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_icons.scss
@ -0,0 +1,76 @@
+// Icons
+
+.#{$jicon-css-prefix}-white {
+  color: $white;
+}
+
+.input-group-text {
+  &::before {
+    min-width: 16px;
+  }
+}
+
+.tbody-icon {
+  padding: 0 3px;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+
+  [class^="#{$jicon-css-prefix}-"],
+  [class*=" #{$jicon-css-prefix}-"],
+  [class^="#{$fa-css-prefix}-"],
+  [class*=" #{$fa-css-prefix}-"] {
+    width: 26px;
+    height: 26px;
+    font-size: 1.1rem;
+    line-height: 22px;
+    color: $gray-400;
+    border: 2px solid var(--border);
+    border-radius: 50%;
+  }
+
+  .#{$jicon-css-prefix}-publish,
+  .#{$jicon-css-prefix}-check,
+  .#{$fa-css-prefix}-check {
+    color: $success;
+    border-color: $success;
+  }
+
+  .#{$jicon-css-prefix}-checkedout,
+  .#{$jicon-css-prefix}-lock,
+  .#{$fa-css-prefix}-lock {
+    width: auto;
+    height: auto;
+    font-size: 1.2rem;
+    line-height: 1rem;
+    color: $gray-700;
+    border: 0;
+  }
+
+  &.home-disabled,
+  &.featured-disabled,
+  &.color-featured-disabled,
+  &.#{$jicon-css-prefix}-star-disabled,
+  &.#{$fa-css-prefix}-star-disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+}
+
+.tbody-icon .icon-delete,
+.tbody-icon .fa-delete,
+.tbody-icon .icon-times,
+.tbody-icon .fa-times {
+  color: $danger;
+  border-color: $danger;
+}
+
+// WebAuthn
+.plg_system_webauthn_login_button svg {
+  width: 30px;
+  margin: 4px;
+}
+
+.plg_system_webauthn_login_button svg path, .plg_system_webauthn_login_button svg circle {
+  fill: var(--black);
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_iframe.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_iframe.scss
@ -0,0 +1,9 @@
+// Iframe
+
+iframe {
+  border: 0;
+}
+
+.modal iframe {
+  width: 100%;
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_layout.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_layout.scss
@ -0,0 +1,120 @@
+// Layout
+
+.grid-child {
+  display: flex;
+  width: 100%;
+  max-width: max-width(xxl);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mod-custom {
+  position: relative;
+}
+
+.container-topbar,
+.container-below-top {
+  color: $white;
+  a {
+    color: currentColor;
+  }
+}
+
+.container-banner {
+  display: block;
+  margin: 0 0 2rem;
+}
+
+.container-top-a,
+.container-top-b,
+.container-bottom-a,
+.container-bottom-b {
+  position: relative;
+  > * {
+    flex: 1;
+    margin: ($cassiopeia-grid-gutter * .5) 0;
+  }
+
+  @include media-breakpoint-down(lg) {
+    flex-direction: column;
+
+    > * {
+      flex: 0 1 auto;
+    }
+  }
+}
+
+.container-component nav {
+  position: relative;
+}
+
+.container-component,
+.container-sidebar-left,
+.container-sidebar-right {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: 0;
+
+    &:first-child {
+      margin-top: $cassiopeia-grid-gutter;
+    }
+  }
+
+  > * + * {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+}
+
+.container-sidebar-left,
+.container-sidebar-right {
+  flex: 0 0 auto;
+  width: calc(100% - #{$cassiopeia-grid-gutter});
+  order: 1;
+
+  @include media-breakpoint-up(md) {
+    width: calc(25% - #{$cassiopeia-grid-gutter});
+    order: 0;
+  }
+}
+
+.container-sidebar-left {
+  .sidebar-left:first-child {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+  .sidebar-left:last-child {
+    margin-bottom: $cassiopeia-grid-gutter;
+  }
+}
+.container-sidebar-right {
+  .sidebar-right:first-child {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+  .sidebar-right:last-child {
+    margin-bottom: $cassiopeia-grid-gutter;
+  }
+}
+
+.system-debug {
+  display: block;
+}
+
+.options-form {
+  width: 100%;
+  padding: 1vw 2vw;
+  margin-bottom: 1rem;
+  color: #495057;
+  background-color: $white;
+  border: 1px solid #b2bfcd;
+
+  > legend {
+    float: none;
+    width: auto;
+    padding: 0 .5rem;
+    font-weight: 700;
+    color: #495057;
+    background-color: $white;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_legacy.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_legacy.scss
@ -0,0 +1,8 @@
+// Legacy
+
+.left.item-image {
+  float: left;
+}
+.right.item-image {
+  float: right;
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_modals.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_modals.scss
@ -0,0 +1,216 @@
+// Modals
+
+.modal {
+  .btn {
+    margin-right: .5rem;
+  }
+
+  .btn-primary:not([href]),
+  .btn-success:not([href]) {
+    color: $white;
+
+    &:hover {
+      color: $white;
+    }
+  }
+}
+
+.modal-header {
+  padding: 0 15px;
+}
+
+.modal-title {
+  font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
+  line-height: $modal-header-height;
+}
+
+.contentpane {
+  padding: 15px;
+
+  .main-card {
+    margin: -10px;
+    box-shadow: none;
+  }
+}
+
+// Styling for joomla-dialog element
+joomla-dialog {
+  dialog {
+    width: 96vw;
+    max-width: 1700px;
+    height: 96vh;
+    padding: 0;
+    border: 1px solid var(--border-color-translucent);
+    border-radius: .3rem;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+
+    @include media-breakpoint-up(xxl) {
+      width: 80vw;
+      height: 80vh;
+    }
+
+    // Override display to flex, to scale the content to full height
+    &[open] {
+      display: flex;
+    }
+  }
+
+  &[type="image"] {
+    dialog {
+      width: fit-content;
+      height: fit-content;
+    }
+  }
+
+  &[type="iframe"] {
+    dialog {
+      overflow: hidden;
+    }
+  }
+
+  iframe.iframe-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  // Extra loading animation for iframe and ajax types
+  &[type="iframe"],
+  &[type="ajax"] {
+    &.loading {
+      dialog:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 66px;
+        height: 66px;
+        content: "";
+        background: url("../../../../system/images/ajax-loader.gif") no-repeat center;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+// Dialog animation
+joomla-dialog dialog[open] {
+  animation: dialog-show .4s ease normal;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+@keyframes dialog-show {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+// Dialog elements
+.joomla-dialog-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+
+  .buttons-holder {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+
+    button {
+      margin-inline: .375rem;
+    }
+  }
+}
+.joomla-dialog-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+
+  h3 {
+    margin: 0;
+  }
+
+  .header-icon {
+    margin-inline-end: .375rem;
+    font-size: $h3-font-size;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+.joomla-dialog-body {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+
+  .buttons-holder {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  // Apply overflow for potentially large content
+  joomla-dialog[type="inline"],
+  joomla-dialog[type="ajax"] & {
+    overflow: auto;
+  }
+
+  // Content basic loading animation
+  joomla-dialog.loading & {
+    opacity: 0;
+  }
+  joomla-dialog.loaded & {
+    opacity: 1;
+    transition: opacity .4s ease;
+  }
+}
+.joomla-dialog-footer {
+  position: relative;
+  padding: 1rem;
+  border-top: 1px solid var(--border-color);
+
+  .buttons-holder button {
+    padding-inline: 22px;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+
+// Dialog alert and confirm
+.joomla-dialog-alert,
+.joomla-dialog-confirm {
+  dialog {
+    width: 600px;
+    max-width: 80vw;
+    height: fit-content;
+  }
+
+  .joomla-dialog-body {
+    padding: 1rem;
+  }
+}
+
+// Dialog for content select field
+.joomla-dialog-content-select-field {
+  dialog {
+    @include media-breakpoint-up(xxl) {
+      width: 90vw;
+      height: 90vh;
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_modifiers.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_modifiers.scss
@ -0,0 +1,330 @@
+// Modifiers
+
+// error page
+
+.error_site {
+  .page-header {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+}
+
+// com_modules
+[class^="container-"],
+[class*=" container-"] {
+  .span-col-2 {
+    flex: 0 0 50%;
+    max-width: calc(50% - #{$cassiopeia-grid-gutter});
+  }
+
+  .span-col-3 {
+    flex: 0 0 33.333%;
+    max-width: calc(33.333% - #{$cassiopeia-grid-gutter});
+  }
+
+  .span-col-4 {
+    flex: 0 0 25%;
+    max-width: calc(25% - #{$cassiopeia-grid-gutter});
+  }
+}
+
+@supports (display: grid) {
+
+  [class^="span-"],
+  [class*=" span-"] {
+    grid-column-end: auto;
+    grid-row-end: auto;
+  }
+
+  [class^="span-col"],
+  [class*=" span-col"] {
+    @include media-breakpoint-up(md) {
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .span-col-2 {
+      grid-column-end: span 2;
+    }
+
+    .span-col-3 {
+      grid-column-end: span 3;
+    }
+
+    .span-col-4 {
+      grid-column-end: span 4;
+    }
+
+    .span-row-2 {
+      grid-row-end: span 2;
+    }
+
+    .span-row-3 {
+      grid-row-end: span 3;
+    }
+
+    .span-row-4 {
+      grid-row-end: span 4;
+    }
+  }
+
+  [class^="container-"],
+  [class*=" container-"] {
+
+    [class^="span-"],
+    [class*=" span-"] {
+      flex: 0 1 auto;
+      max-width: none;
+    }
+  }
+}
+
+// com_content
+.blog-items {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 0;
+  margin-right: -($cassiopeia-grid-gutter * .5);
+  margin-bottom: $cassiopeia-grid-gutter;
+  margin-left: -($cassiopeia-grid-gutter * .5);
+
+  @include media-breakpoint-up(lg) {
+    &.columns-2 {
+      > div {
+        width: 50%;
+      }
+    }
+
+    &.columns-3 {
+      > div {
+        width: 33.33333%;
+      }
+    }
+
+    &.columns-4 {
+      > div {
+        width: 25%;
+      }
+    }
+  }
+}
+
+.blog-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0 ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
+  overflow: hidden;
+
+  .boxed & {
+    background-color: $white;
+    box-shadow: 0 0 2px hsla(216, 13%, 23%, .1), 0 2px 5px hsla(216, 13%, 23%, .08), 0 5px 15px hsla(216, 13%, 23%, .08), inset 0 3px 0 var(--cassiopeia-color-primary);
+
+    .item-content {
+      padding: 25px;
+    }
+  }
+
+  .item-image {
+    margin-top: 3px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    .boxed & {
+      margin-bottom: 0;
+    }
+
+    @include media-breakpoint-up(lg) {
+      .image-right & {
+        order: 1;
+      }
+    }
+
+    .image-bottom & {
+      margin-top: -15px;
+      order: 1;
+    }
+  }
+
+  .item-content {
+    .image-left & {
+      padding-left: 25px;
+    }
+
+    .image-right & {
+      padding-right: 25px;
+    }
+  }
+
+  .image-left &,
+  .image-right & {
+    flex-direction: column;
+
+    @include media-breakpoint-up(lg) {
+      flex-direction: row;
+      .item-image {
+        flex: 1 0 40%;
+      }
+      .item-content {
+        flex: 1 0 60%;
+      }
+    }
+  }
+}
+
+.article-info {
+  dd {
+    padding: 0;
+  }
+}
+
+@supports (display: grid) {
+  .blog-items {
+    display: grid;
+    margin: 0 0 $cassiopeia-grid-gutter;
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    grid-gap: $cassiopeia-grid-gutter;
+
+    .blog-item {
+      padding: 0;
+    }
+
+    &[class^="columns-"],
+    &[class*=" columns-"] {
+      > div {
+        flex: 0 1 auto;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      &.columns-2 {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      &.columns-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      &.columns-4 {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+      }
+    }
+  }
+}
+
+.blog-items {
+
+  &[class^="masonry-"],
+  &[class*=" masonry-"] {
+    display: block;
+    column-gap: $cassiopeia-grid-gutter;
+
+    .blog-item {
+      display: inline-flex;
+      margin-bottom: $cassiopeia-grid-gutter;
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.masonry-2 {
+      column-count: 2;
+    }
+
+    &.masonry-3 {
+      column-count: 3;
+    }
+
+    &.masonry-4 {
+      column-count: 4;
+    }
+  }
+}
+
+.image-alternate {
+  .blog-item:nth-of-type(2n+1) {
+    .item-image {
+      order: 0;
+    }
+  }
+
+  &.image-left {
+    .blog-item:nth-of-type(2n+1) {
+      .item-image {
+        margin-right: 0;
+        margin-left: 25px;
+        order: 1;
+      }
+    }
+  }
+
+  &.image-top {
+    .blog-item:nth-of-type(2n+1) {
+      .item-image {
+        order: 1;
+      }
+    }
+  }
+}
+
+// Modules
+
+.breadcrumb {
+  margin-bottom: 0;
+  background-color: hsla(0, 0%, 0%, .03);
+}
+
+.no-card {
+  .newsflash-horiz {
+    li {
+      padding: 0 1rem 1rem;
+      border: 1px solid $gray-300;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      @include border-bottom-start-radius($border-radius);
+      @include border-bottom-end-radius($border-radius);
+      box-shadow: $cassiopeia-box-shadow;
+
+      figure {
+        margin: 0 -1rem 1rem;
+      }
+    }
+  }
+}
+
+.mod-list {
+  padding-inline-start: 0;
+  list-style: none;
+
+  li {
+    padding: .25em 0;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+
+        @at-root .container-header & {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.active > a {
+      text-decoration: underline;
+
+      @at-root .container-header & {
+        text-decoration: none;
+      }
+    }
+
+    .mod-menu__sub {
+      padding-left: $cassiopeia-grid-gutter;
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_tags.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_tags.scss
@ -0,0 +1,15 @@
+// Tags
+
+.tags {
+  .list-inline-item {
+    margin: .25rem .25rem .5rem;
+  }
+  a.btn {
+    font-weight: 700;
+  }
+}
+
+.tag {
+  display: inline-block;
+  padding: .5rem .5rem .5rem 0;
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_toolbar.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_toolbar.scss
@ -0,0 +1,175 @@
+.subhead {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-toolbar;
+  width: auto;
+  min-height: 43px;
+  padding: .25rem;
+  color: #495057; //#0c192e;
+  background: $white;
+  box-shadow: -3px -2px 22px #ddd;
+
+  .row {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &.noshadow {
+    box-shadow: none;
+  }
+
+  joomla-toolbar-button,
+  .btn-group {
+    margin-inline-start: .75rem;
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+  }
+
+  joomla-toolbar-button {
+
+    .btn > span,
+    .dropdown-item > span {
+      margin-inline-end: .5rem;
+      width: 1.25em;
+      text-align: center;
+    }
+  }
+
+  .btn {
+    --subhead-btn-accent: #495057;
+    padding: 0 1rem;
+    margin: 5px 0;
+    font-size: 1rem;
+    line-height: 2.45rem;
+    color: #495057;
+    background: $white;
+    border-color: $gray-500;
+
+    > span {
+      display: inline-block;
+      color: var(--subhead-btn-accent);
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      color: rgba(255, 255, 255, .9);
+      background-color: var(--subhead-btn-accent);
+      border-color: var(--subhead-btn-accent);
+
+      > span {
+        color: rgba(255, 255, 255, .9);
+      }
+    }
+
+    &.btn-success {
+      --subhead-btn-accent: var(--success);
+    }
+
+    &.btn-danger {
+      --subhead-btn-accent: var(--danger);
+    }
+
+    &.btn-primary {
+      --subhead-btn-accent: #2a69b8;
+    }
+
+    &.btn-secondary {
+      --subhead-btn-accent: #001b4c;
+    }
+
+    &.btn-info {
+      --subhead-btn-accent: #132f53;
+    }
+
+    &.btn-action {
+      --subhead-btn-accent: #132f53;
+      display: flex;
+      align-items: center;
+
+      &::after {
+        width: 2.375rem;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f078";
+        border: 0;
+
+      }
+    }
+
+    &[disabled],
+    &.dropdown-toggle[disabled] {
+      --subhead-btn-accent: #132f53;
+      background: rgba($gray-300, .8);
+      opacity: .5;
+
+      &:hover,
+      &:active,
+      &:focus {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .dropdown-toggle {
+    &.btn {
+      padding-inline-end: 0;
+    }
+  }
+
+  .btn-group:not(:last-child) > .dropdown-toggle-split {
+    order: 1;
+    margin-inline-start: -$border-radius;
+    border-radius: 0 $border-radius $border-radius 0;
+  }
+
+  .dropdown-menu joomla-toolbar-button,
+  .btn-group joomla-toolbar-button {
+    margin-inline-start: 0;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  joomla-tab[view=accordion] .col-md-9,
+  joomla-tab[view=accordion] .col-md-3 {
+    padding: .5rem 1rem !important;
+  }
+
+  #myTab {
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  joomla-tab[view=accordion] ul li {
+    width: 100%;
+  }
+
+  .subhead {
+
+    joomla-toolbar-button,
+    .btn-group,
+    .btn {
+      width: 100%;
+      margin-left: 0;
+      text-align: left;
+    }
+
+    .btn-toolbar > .btn-group,
+    .btn-toolbar > joomla-toolbar-button {
+      margin-left: 0;
+    }
+
+    .btn.btn-action::after {
+      text-align: center;
+      margin-inline-start: auto;
+    }
+
+    .dropdown-toggle-split {
+      width: auto;
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/blocks/_utilities.scss
+++ b/media/templates/site/cassiopeia/scss/blocks/_utilities.scss
@ -0,0 +1,31 @@
+// Utilities
+
+// Keep B/C
+.element-invisible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.table-row {
+  display: table-row;
+}
+
+joomla-alert {
+  display: none;
+}
+
+.editor-xtd-buttons .btn {
+  margin-bottom: 5px;
+}
--- a/media/templates/site/cassiopeia/scss/editor.scss
+++ b/media/templates/site/cassiopeia/scss/editor.scss
@ -0,0 +1,93 @@
+/* STYLES FOR JOOMLA! EDITOR */
+body {
+  margin: 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #22262a;
+  background-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+h2 {
+  font-size: calc(1.325rem + .9vw);
+}
+
+h3 {
+  font-size: calc(1.3rem + .6vw);
+}
+
+h4 {
+  font-size: calc(1.275rem + .3vw);
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+  &:link {
+    color: #224faa;
+  }
+  &:hover {
+    color: #424077;
+  }
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* STYLES FOR JOOMLA! EDITOR */
+hr#system-readmore {
+  color: #f00;
+  border: #f00 dashed 1px;
+}
+
+span[lang] {
+  padding: 2px;
+  border: 1px dashed #bbb;
+  &:after {
+    font-size: smaller;
+    color: #f00;
+    vertical-align: super;
+    content: attr(lang);
+  }
+}
+
+.float-start {
+  float: left;
+}
+
+.float-end {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.d-block {
+  display: block !important;
+}
--- a/media/templates/site/cassiopeia/scss/global/colors_alternative.scss
+++ b/media/templates/site/cassiopeia/scss/global/colors_alternative.scss
@ -0,0 +1,12 @@
+// Variables, Functions and Mixins
+@import "../tools/tools";
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+:root {
+  --cassiopeia-color-primary: #{$alternative-color-primary};
+  // @deprecated --casiopeia-color-link is deprecated in favour of --link-color
+  --cassiopeia-color-link: #{$alternative-color-link};
+  --link-color: #{$alternative-color-link};
+  --link-color-rgb: #{to-rgb($alternative-color-link)};
+  --cassiopeia-color-hover: #{$alternative-color-hover};
+}
--- a/media/templates/site/cassiopeia/scss/global/colors_standard.scss
+++ b/media/templates/site/cassiopeia/scss/global/colors_standard.scss
@ -0,0 +1,12 @@
+// Variables, Functions and Mixins
+@import "../tools/tools";
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+:root {
+  --cassiopeia-color-primary: #{$standard-color-primary};
+  // @deprecated --casiopeia-color-link is deprecated in favour of --link-color
+  --cassiopeia-color-link: #{$standard-color-link};
+  --link-color: #{$standard-color-link};
+  --link-color-rgb: #{to-rgb($standard-color-link)};
+  --cassiopeia-color-hover: #{$standard-color-hover};
+}
--- a/media/templates/site/cassiopeia/scss/global/fonts-local_roboto.scss
+++ b/media/templates/site/cassiopeia/scss/global/fonts-local_roboto.scss
@ -0,0 +1,10 @@
+// Fonts
+$roboto-font-path: "../../../../../vendor/roboto-fontface/fonts" !default;
+@import "../../../../../vendor/roboto-fontface/scss/roboto/sass/roboto-fontface";
+
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: 700;
+  --cassiopeia-font-weight-normal: 400;
+}
--- a/media/templates/site/cassiopeia/scss/offline.scss
+++ b/media/templates/site/cassiopeia/scss/offline.scss
@ -0,0 +1,98 @@
+// Bootstrap functions
+@import "../../../../vendor/bootstrap/scss/functions";
+
+// Variables, Functions and Mixins
+@import "tools/tools";
+
+.outer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.offline-card {
+  width: 100%;
+  max-width: 30em;
+  margin: 60px auto;
+  background-color: $white;
+  border: 1px solid hsla(0, 0%, 0%, .1);
+  border-radius: 5px;
+  box-shadow: 0 0 10px hsla(0, 0%, 0%, .05);
+}
+
+.header {
+  position: relative;
+  padding: $cassiopeia-grid-gutter ($cassiopeia-grid-gutter*2);
+  margin: 0;
+  color: $white;
+  text-align: center;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad;
+  border-radius: 5px 5px 0 0;
+
+  [dir=rtl] & {
+    background-image: $cassiopeia-header-grad-rtl;
+  }
+}
+
+.login {
+  padding: 40px 20px 20px;
+}
+
+.form-control {
+  max-width: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  margin: 15px 0;
+  border: 0;
+}
+
+form,
+fieldset {
+  padding: 0;
+  margin: 0;
+}
+
+label {
+  display: block;
+  margin: 0;
+}
+
+input[type="text"],
+input[type="password"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+}
+
+input {
+  margin: .5em 0 1em;
+}
+
+.logo-icon {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  z-index: 1;
+  padding: 12px;
+  margin-top: 2px;
+  background-color: $white;
+  border: 1px solid hsla(0, 0%, 0%, .05);
+  border-radius: 50%;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, .075);
+  transform: translate(-50%, -50%);
+}
+
+.logo-icon svg {
+  display: block;
+  width: 38px;
+}
--- a/media/templates/site/cassiopeia/scss/system/searchtools/searchtools.scss
+++ b/media/templates/site/cassiopeia/scss/system/searchtools/searchtools.scss
@ -0,0 +1,56 @@
+@import "../../tools/tools";
+
+// Search tools
+
+.js-stools-container-bar {
+  padding: 10px 20px;
+
+  .btn-toolbar {
+    justify-content: flex-end;
+
+    > * {
+      margin: 4px 0;
+      margin-inline-end: 8px;
+    }
+
+    .js-stools-btn-clear {
+      background-color: $cyan;
+      border: 0;
+    }
+  }
+
+  .ordering-select {
+    display: flex;
+  }
+}
+
+.js-stools-container-filters {
+  display: none;
+  padding: 0 20px;
+  margin-bottom: 20px;
+
+  &-visible {
+    display: grid;
+    grid-gap: 8px;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    padding: 10px;
+    background-color: $white;
+  }
+
+  > * {
+    margin: 4px 0;
+    margin-inline-end: 8px;
+  }
+}
+
+.js-stools-field-list {
+  + .js-stools-field-list {
+    margin-inline-start: 8px;
+  }
+}
+
+.js-stools-field-selector {
+  .form-select {
+    width: auto;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/template-rtl.scss
+++ b/media/templates/site/cassiopeia/scss/template-rtl.scss
@ -0,0 +1,2 @@
+// This file is a placeholder for the rtl template
+@import "template";
--- a/media/templates/site/cassiopeia/scss/template.scss
+++ b/media/templates/site/cassiopeia/scss/template.scss
@ -0,0 +1,186 @@
+// Bootstrap functions
+@import "../../../../vendor/bootstrap/scss/functions";
+@import "tools/variables/variables";
+@import "../../../../vendor/bootstrap/scss/variables";
+@import "../../../../vendor/bootstrap/scss/variables-dark";
+@import "../../../../vendor/bootstrap/scss/maps";
+@import "../../../../vendor/bootstrap/scss/mixins";
+@import "../../../../vendor/bootstrap/scss/utilities";
+
+// Variables, Functions and Mixins
+@import "tools/tools";
+
+// Bootstrap
+@import "../../../../vendor/bootstrap/scss/bootstrap";
+
+// jQuery Minicolors
+@import "../../../../system/scss/jquery-minicolors";
+
+// Blocks
+@import "blocks/global"; // Leave this first
+@import "blocks/alerts";
+@import "blocks/back-to-top";
+@import "blocks/banner";
+@import "blocks/footer";
+@import "blocks/form";
+@import "blocks/frontend-edit";
+@import "blocks/header";
+@import "blocks/icons";
+@import "blocks/iframe";
+@import "blocks/layout";
+@import "blocks/modals";
+@import "blocks/modifiers";
+@import "blocks/utilities";
+@import "blocks/toolbar";
+@import "blocks/legacy";
+@import "blocks/tags";
+@import "blocks/css-grid"; // Last to allow fallback
+
+// Vendor overrides
+@import "vendor/awesomplete";
+@import "vendor/bootstrap/buttons";
+@import "vendor/bootstrap/custom-forms";
+@import "vendor/bootstrap/collapse";
+@import "vendor/bootstrap/dropdown";
+@import "vendor/bootstrap/forms";
+@import "vendor/bootstrap/lists";
+@import "vendor/bootstrap/modal";
+@import "vendor/bootstrap/nav";
+@import "vendor/bootstrap/pagination";
+@import "vendor/bootstrap/table";
+@import "vendor/chosen";
+@import "vendor/dragula";
+@import "vendor/metismenu/metismenu";
+@import "vendor/minicolors";
+@import "vendor/tinymce";
+
+// Finally add the cassiopeia colours
+:root {
+  @each $color, $value in $cassiopeia-colors {
+    --#{$color}: #{$value};
+  }
+}
+
+.border-primary {
+  border-color: var(--primary) !important;
+}
+
+.border-secondary {
+  border-color: var(--secondary) !important;
+}
+
+.border-success {
+  border-color: var(--success) !important;
+}
+
+.border-info {
+  border-color: var(--info) !important;
+}
+
+.border-warning {
+  border-color: var(--warning) !important;
+}
+
+.border-danger {
+  border-color: var(--danger) !important;
+}
+
+.border-light {
+  border-color: var(--light) !important;
+}
+
+.border-dark {
+  border-color: var(--dark) !important;
+}
+
+.border-white {
+  border-color: var(--white) !important;
+}
+
+.text-primary {
+  color: var(--primary) !important;
+}
+
+.text-secondary {
+  color: var(--secondary) !important;
+}
+
+.text-success {
+  color: var(--success) !important;
+}
+
+.text-info {
+  color: var(--info) !important;
+}
+
+.text-warning {
+  color: var(--warning) !important;
+}
+
+.text-danger {
+  color: var(--danger) !important;
+}
+
+.text-light {
+  color: var(--light) !important;
+}
+
+.text-dark {
+  color: var(--dark) !important;
+}
+
+.text-black {
+  color: var(--black) !important;
+}
+
+.text-white {
+  color: var(--white) !important;
+}
+
+.text-body {
+  color: var(--body-color) !important;
+}
+
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
+}
+
+.bg-success {
+  background-color: var(--success) !important;
+}
+
+.bg-info {
+  background-color: var(--info) !important;
+}
+
+.bg-warning {
+  background-color: var(--warning) !important;
+}
+
+.bg-danger {
+  background-color: var(--danger) !important;
+}
+
+.bg-light {
+  background-color: var(--light) !important;
+}
+
+.bg-dark {
+  background-color: var(--dark) !important;
+}
+
+.bg-black {
+  background-color: var(--black) !important;
+}
+
+.bg-white {
+  background-color: var(--white) !important;
+}
+
+.bg-body {
+  background-color: var(--body-bg) !important;
+}
--- a/media/templates/site/cassiopeia/scss/tools/_tools.scss
+++ b/media/templates/site/cassiopeia/scss/tools/_tools.scss
@ -0,0 +1,10 @@
+// Vendor
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+
+// Variables
+@import "variables/variables";
+
+
+// Functions
+@import "functions/max-width";
--- a/media/templates/site/cassiopeia/scss/tools/functions/_max-width.scss
+++ b/media/templates/site/cassiopeia/scss/tools/functions/_max-width.scss
@ -0,0 +1,4 @@
+// Retrieve the max-width
+@function max-width($key: "md") {
+  @return map-get($container-max-widths, $key);
+}
--- a/media/templates/site/cassiopeia/scss/tools/variables/_variables.scss
+++ b/media/templates/site/cassiopeia/scss/tools/variables/_variables.scss
@ -0,0 +1,285 @@
+// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
+$prefix: "";
+
+// Disable dark mode in J4.4 - it's going to cause major b/c breaks to introduce. We will enable it in 5.0
+$enable-dark-mode: false;
+
+// Global
+$cassiopeia-container-main-bg:        hsl(0, 0%, 95%) !default;
+$cassiopeia-border-color:             hsl(210, 14%, 89%) !default;
+$cassiopeia-box-shadow:               1px 1px 4px hsla(0, 0%, 0%, .1) !default;
+$cassiopeia-block-header-bg:          hsl(0, 0%, 96%) !default;
+$cassiopeia-header-grad:              linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%) !default;
+$cassiopeia-header-grad-rtl:          linear-gradient(135deg, var(--cassiopeia-color-hover) 0%, var(--cassiopeia-color-primary) 100%) !default;
+$cassiopeia-inverted-text-color:      var(--cassiopeia-color-hover) !default;
+
+// Color system
+
+// Standard
+$standard-color-primary:              hsl(220, 67%, 20%) !default;
+$standard-color-link:                 hsl(220, 67%, 40%) !default;
+$standard-color-hover:                hsl(242, 30%, 36%) !default;
+
+// Alternative
+$alternative-color-primary:           hsl(351, 54%, 37%) !default;
+$alternative-color-link:              hsl(207, 49%, 37%) !default;
+$alternative-color-hover:             hsl(351, 33%, 44%) !default;
+
+$white:                               hsl(0, 0%, 100%) !default;
+$gray-100:                            hsl(210, 17%, 98%) !default;
+$gray-200:                            hsl(210, 16%, 93%) !default;
+$gray-300:                            hsl(210, 14%, 89%) !default;
+$gray-400:                            hsl(210, 14%, 83%) !default;
+$gray-500:                            hsl(210, 11%, 71%) !default;
+$gray-600:                            hsl(210, 7%, 46%) !default;
+$gray-700:                            hsl(210, 9%, 31%) !default;
+$gray-800:                            hsl(210, 10%, 23%) !default;
+$gray-900:                            hsl(210, 11%, 15%) !default;
+$black:                               hsl(0, 0%, 0%) !default;
+
+$grays: (
+  100:                                $gray-100,
+  200:                                $gray-200,
+  300:                                $gray-300,
+  400:                                $gray-400,
+  500:                                $gray-500,
+  600:                                $gray-600,
+  700:                                $gray-700,
+  800:                                $gray-800,
+  900:                                $gray-900
+) !default;
+
+$blue:                                hsl(240, 98%, 17%) !default;
+$indigo:                              hsl(263, 90%, 51%) !default;
+$purple:                              hsl(261, 51%, 51%) !default;
+$pink:                                hsl(332, 79%, 58%) !default;
+$red:                                 hsl(3, 75%, 37%) !default;
+$orange:                              hsl(27, 98%, 54%) !default;
+$yellow:                              hsl(34, 100%, 34%) !default;
+$green:                               hsl(120, 32%, 39%) !default;
+$teal:                                hsl(194, 66%, 61%) !default;
+$cyan:                                hsl(207, 49%, 37%) !default;
+
+$colors: (
+  "blue":                             $blue,
+  "black":                            $black,
+  "indigo":                           $indigo,
+  "purple":                           $purple,
+  "pink":                             $pink,
+  "red":                              $red,
+  "orange":                           $orange,
+  "yellow":                           $yellow,
+  "green":                            $green,
+  "teal":                             $teal,
+  "cyan":                             $cyan,
+  "white":                            $white
+) !default;
+
+$primary:                             $blue !default;
+$secondary:                           $gray-600 !default;
+$success:                             $green !default;
+$info:                                $cyan !default;
+$warning:                             $yellow !default;
+$danger:                              $red !default;
+$light:                               $gray-100 !default;
+$dark:                                $gray-800 !default;
+
+
+$theme-colors: (
+  primary:                            $blue,
+  secondary:                          $secondary,
+  success:                            $success,
+  info:                               $info,
+  warning:                            $warning,
+  danger:                             $danger,
+  light:                              $light,
+  dark:                               $dark
+) !default;
+
+$colors: (
+  card-bg:                         rgba(255, 255, 255, .7),
+  bluegray:                        #b2bfcd,
+  lightbluegray:                   #f6f9fc,
+  toolbar-bg:                      $white,
+  success-border:                  var(--success),
+  info-border:                     var(--info),
+  warning-border:                  var(--warning),
+  danger-border:                   var(--danger),
+  border:                          $gray-400,
+  "white":                         $white, // the key here must be in quotes to avoid scss compilation warnings.
+  white-offset:                    #fefefe,
+  focus:                           #39f,
+  focus-shadow:                    0 0 0 .2rem #eaeaea,
+  toggle-color:                    $white, //used in sidebar
+) !default;
+
+$cassiopeia-colors: (
+  template-sidebar-bg:                 var(--template-bg-dark-80),
+  template-sidebar-font-color:         $white,
+  template-sidebar-link-color:         $white,
+  template-bg-light:                   #f0f4fb, //light background color, frontend dashboard background
+  template-text-light:                 $white,
+  template-special-color:              #132f53,
+  template-link-color:                 #2a69b8,
+  template-link-hover-color:           darken(#2a69b8, 20%),
+  template-contrast:                   #2a69b8,
+  template-bg-dark:                    hsl(var(--hue), 40%, 20%),
+  template-bg-dark-3:                  hsl(var(--hue), 40%, 97%),
+  template-bg-dark-5:                  hsl(var(--hue), 40%, 95%),
+  template-bg-dark-7:                  hsl(var(--hue), 40%, 93%),
+  template-bg-dark-10:                 hsl(var(--hue), 40%, 90%),
+  template-bg-dark-15:                 hsl(var(--hue), 40%, 85%),
+  template-bg-dark-20:                 hsl(var(--hue), 40%, 80%),
+  template-bg-dark-30:                 hsl(var(--hue), 40%, 70%),
+  template-bg-dark-40:                 hsl(var(--hue), 40%, 60%),
+  template-bg-dark-50:                 hsl(var(--hue), 40%, 50%),
+  template-bg-dark-60:                 hsl(var(--hue), 40%, 40%),
+  template-bg-dark-65:                 hsl(var(--hue), 40%, 35%),
+  template-bg-dark-70:                 hsl(var(--hue), 40%, 30%),
+  template-bg-dark-75:                 hsl(var(--hue), 40%, 25%),
+  template-bg-dark-80:                 hsl(var(--hue), 40%, 20%),
+  template-bg-dark-90:                 hsl(var(--hue), 40%, 10%)
+) !default;
+
+// Links
+$link-color:                          $standard-color-link !default;
+$link-hover-color:                    $standard-color-hover !default;
+
+// Breadcrumbs
+$breadcrumb-active-color:             $gray-700 !default;
+
+// Grid columns
+$grid-gutter-width:                   1em !default;
+$cassiopeia-grid-gutter:              $grid-gutter-width !default;
+
+// Components
+$fa-font-path:                        "../../../media/vendor/fontawesome-free/webfonts" !default;
+
+// Treeselect
+$treeselect-line-height:              2.2rem !default;
+
+// MetisMenu
+$metismenu:                           true !default;
+
+// Toolbar
+$cassiopeia-toolbar-line-height:      1.8rem !default;
+
+// Typography
+$font-family-sans-serif:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-base:                    var(--cassiopeia-font-family-body, $font-family-sans-serif) !default;
+
+// Icons
+$jicon-css-prefix:                    icon !default;
+$fa-css-prefix:                       fa !default;
+
+// Tables
+$table-bg-scale:                      -80% !default;
+
+// This should be the same as bootstrap's default. But we override primary colour from $primary (which is a CSS Var)
+// to the SCSS variable matching
+$table-variants: (
+  "primary":    shift-color($standard-color-primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
+) !default;
+
+// Forms
+$input-border-color:                  $gray-400 !default;
+$input-padding:                       .6rem 1rem !default;
+$input-btn-padding-y:                 .6rem !default;
+$input-btn-padding-x:                 1rem !default;
+$input-max-width:                     100% !default;
+$input-focus-border-color:            tint-color($standard-color-primary, 50%) !default;
+
+$form-select-indicator-padding:     3rem !default;
+$form-select-bg:                    $gray-200 !default;
+$form-select-bg-size:               116rem !default;
+$form-select-bg-size-sm:            75rem !default;
+$form-select-indicator:             url("../images/select-bg.svg") !default;
+$form-select-indicator-rtl:         url("../images/select-bg-rtl.svg") !default;
+$form-select-indicator-active:      url("../../../images/select-bg.svg") !default;
+$form-select-indicator-active-rtl:  url("../../../images/select-bg-rtl.svg") !default;
+$form-select-background:            $form-select-indicator no-repeat right center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$form-select-background-rtl:        $form-select-indicator-rtl no-repeat left center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$form-select-multiple-padding-y:    .3rem !default;
+
+$form-range-thumb-active-bg:        tint-color($standard-color-primary, 70%) !default;
+
+// Z-index source list
+$zindex-negative:                     -1 !default;
+$zindex-actions:                      auto !default;
+$zindex-toolbar:                      1000 !default;
+$zindex-sidebar:                      1010 !default;
+$zindex-header:                       1020 !default;
+$zindex-alerts:                       1030 !default;
+$zindex-modal-backdrop:               1040 !default;
+$zindex-modal:                        1050 !default;
+$zindex-popover:                      1060 !default;
+$zindex-tooltip:                      1070 !default;
+$zindex-mobile-bottom:                8000 !default;
+$zindex-mobile-toggle:                9999 !default;
+$zindex-mobile-menu:                  9000 !default;
+
+// Navs
+$nav-link-padding-y:                  .5rem !default;
+
+// Navs
+$cassiopeia-tabs-header-bg:           $cassiopeia-block-header-bg !default;
+$cassiopeia-tabs-active-bg:           hsla(0, 0%, 0%, .3) !default;
+$cassiopeia-tabs-active-highlight:    var(--cassiopeia-color-primary) !default;
+
+// Navbar
+$nav-link-height:                     1.5rem + $nav-link-padding-y * 2 !default;
+
+// Cards
+$cassiopeia-card-title-bg:            $cassiopeia-block-header-bg !default;
+$cassiopeia-card-title-icon-bg:       $cassiopeia-block-header-bg !default;
+$cassiopeia-card-title-icon-bg-hover: scale-color($cassiopeia-card-title-bg, $lightness: 2%) !default;
+$card-bg-color-light:                 $gray-100 !default;
+$card-bg-color-dark:                  var(--cassiopeia-color-primary) !default;
+$card-border-color:                   $cassiopeia-border-color !default;
+
+// Badges
+$badge-default-bg:                    $gray-600 !default;
+
+// Modals
+$modal-header-height:                 3rem !default;
+
+// Accordion
+$accordion-button-active-bg:          tint-color($standard-color-primary, 90%) !default;
+$accordion-button-active-color:       shade-color($standard-color-primary, 10%) !default;
+
+// Alerts
+$state-success-text:                  $white !default;
+$state-success-bg:                    $success !default;
+$state-success-border:                scale-color($success, $lightness: -5%) !default;
+
+$state-info-text:                     $white !default;
+$state-info-bg:                       $info !default;
+$state-info-border:                   scale-color($info, $lightness: -7%) !default;
+
+$state-warning-text:                  $white !default;
+$state-warning-bg:                    $warning !default;
+$state-warning-border:                scale-color($warning, $lightness: -5%) !default;
+
+$state-danger-text:                   $white !default;
+$state-danger-bg:                     $danger !default;
+$state-danger-border:                 scale-color($danger, $lightness: -5%) !default;
+
+// Mark element
+$mark-padding: .1875em 0;
+$mark-bg: #fbeea8 !default;
+
+// scss-docs-start border-radius-variables
+$btn-border-radius: .25rem !default;
+$border-radius: .25rem !default;
+$border-radius-sm: .2rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-xl: .3rem !default;
+$border-radius-2xl: .3rem !default;
+// scss-docs-end border-radius-variables
--- a/media/templates/site/cassiopeia/scss/vendor/_awesomplete.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/_awesomplete.scss
@ -0,0 +1,30 @@
+// Awesomplete
+
+.mod-finder__search.input-group {
+  flex-wrap: nowrap;
+  .awesomplete {
+    input {
+      @include border-end-radius(0);
+    }
+  }
+  button {
+    display: flex;
+    align-items: center;
+    .icon-search {
+      margin-inline-end: .2em;
+    }
+  }
+}
+
+.awesomplete {
+  > input {
+    max-width: 200px;
+
+    @include media-breakpoint-up(lg) {
+      max-width: none;
+    }
+  }
+  > ul {
+    z-index: $zindex-dropdown !important;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/_chosen.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/_chosen.scss
@ -0,0 +1,121 @@
+// Chosen
+
+$chosen-select-padding-y: $form-select-padding-y + .21;
+
+.chosen-container.chosen-container-single {
+  max-width: $input-max-width;
+  font-size: $font-size-base;
+
+  .chosen-single {
+    display: inline-block;
+    height: #{$input-height};
+    padding: $chosen-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $chosen-select-padding-y $form-select-padding-x;
+    line-height: 1.5;
+    color: $form-select-color;
+    vertical-align: middle;
+    background: $form-select-bg $form-select-indicator no-repeat right $form-select-padding-x center;
+    background-image: none \9;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    box-shadow: none;
+    appearance: none;
+    @include border-radius($form-select-border-radius, 0);
+
+    abbr {
+      top: 10px;
+    }
+
+    &:focus {
+      @include box-shadow($form-select-focus-box-shadow);
+      border-color: $form-select-focus-border-color;
+      outline: none;
+    }
+
+    &:disabled {
+      color: $form-select-disabled-color;
+      cursor: not-allowed;
+      background-color: $form-select-disabled-bg;
+    }
+
+    div b {
+      background: none !important;
+    }
+  }
+
+  .chosen-drop {
+    background: $white;
+    border: $form-select-border-width solid $form-select-border-color;
+  }
+
+  .chosen-results li {
+    line-height: calc(#{$font-size-base} + .3rem);
+  }
+
+  &.chosen-container-active .chosen-single {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.chosen-container.chosen-container-multi {
+  .chosen-choices {
+    max-width: $input-max-width;
+    min-height: #{$input-height};
+    font-size: $font-size-base;
+    line-height: $input-line-height;
+    background-image: $white;
+
+    li.search-choice {
+      $chosen-multi-close-width: 20px;
+
+      padding: 5px (13 + $chosen-multi-close-width) 5px 10px;
+      color: $white;
+      background: var(--primary);
+      border: 0;
+      box-shadow: $cassiopeia-box-shadow;
+
+      @if $enable-rounded {
+        border-radius: $form-select-border-radius;
+      } @else {
+        border-radius: 0;
+      }
+
+      .search-choice-close {
+        top: 0;
+        right: 0;
+        width: $chosen-multi-close-width;
+        height: 100%;
+        background: hsla(0, 0%, 0%, .2);
+        background-image: none !important;
+
+        &::before {
+          position: absolute;
+          top: 6px;
+          right: $chosen-multi-close-width * .25;
+          font-size: $font-size-base;
+          color: $white;
+          content: "\00d7";
+        }
+      }
+    }
+  }
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single {
+  box-shadow: none;
+}
+
+// TEMPORARY
+.chosen-container-single {
+  width: auto !important;
+}
+
+// END TEMPORARY
+
+.card .chosen-container.chosen-container-single {
+  width: 100% !important;
+
+  .chosen-single {
+    width: 100% !important;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/_dragula.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/_dragula.scss
@ -0,0 +1,19 @@
+// Dragula
+
+.gu-mirror {
+  position: fixed !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  background-color: hsl(120, 73%, 75%);
+  opacity: .8;
+
+  &.table {
+    display: table;
+
+    td {
+      display: table-cell;
+    }
+
+  }
+
+}
--- a/media/templates/site/cassiopeia/scss/vendor/_minicolors.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/_minicolors.scss
@ -0,0 +1,17 @@
+// Minicolours
+
+.minicolors-theme-bootstrap {
+
+  .minicolors-input {
+    width: 120px;
+  }
+
+  .rgb {
+    width: 175px;
+  }
+
+  .rgba {
+    width: 220px;
+  }
+
+}
--- a/media/templates/site/cassiopeia/scss/vendor/_tinymce.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/_tinymce.scss
@ -0,0 +1,23 @@
+// TinyMCE
+
+.editor {
+
+  .toggle-editor {
+    margin-top: 1rem;
+  }
+
+  .mce-tinymce {
+    border: 1px solid $card-border-color;
+    @include border-radius($card-border-radius);
+  }
+
+  .mce-btn,
+  .mce-panel {
+    background: $card-bg-color-light;
+  }
+
+}
+
+.tox {
+  white-space: nowrap !important;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_buttons.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_buttons.scss
@ -0,0 +1,57 @@
+// Buttons
+
+.btn:focus,
+.btn.focus,
+.btn:active:focus,
+.btn.focus:active,
+.btn.active:focus,
+.btn.active.focus {
+  text-decoration: none;
+}
+
+.btn.group-move {
+  cursor: move;
+}
+
+.btn-secondary {
+  color: $gray-800;
+  background-color: $white;
+  border-color: $gray-400;
+
+  &:hover,
+  &:focus {
+    color: $gray-800;
+    background-color: $gray-100;
+  }
+}
+
+.article-info .association,
+.cat-list-association {
+  .btn-secondary {
+    font-weight: 700;
+    color: $white;
+    background-color: $gray-600;
+    border-color: $gray-400;
+
+    &:hover,
+    &:focus {
+      color: $white;
+      background-color: $gray-800;
+    }
+  }
+
+  .btn-sm {
+    padding: 0 .25rem;
+    font-size: .8rem;
+    border-radius: .2rem;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .btn {
+    margin-bottom: .25rem;
+  }
+  .input-group .btn {
+    margin-bottom: 0;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_collapse.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_collapse.scss
@ -0,0 +1,16 @@
+// Collapse
+
+.accordion {
+
+  .card-header {
+    display: block;
+    font-size: $h5-font-size;
+    font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
+    line-height: $headings-line-height;
+  }
+
+  .list-group-item {
+    color: $link-color;
+  }
+
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss
@ -0,0 +1,72 @@
+// Custom Forms
+
+.custom-select {
+  @extend .form-select;
+}
+
+.form-select {
+  max-width: $input-max-width;
+  cursor: pointer;
+  background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};
+  background-color: $form-select-bg;
+  border: $input-border-width solid $input-border-color;
+  @include box-shadow($form-select-box-shadow);
+
+  &:focus {
+    border-color: #000;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+  }
+
+  &[multiple] {
+    padding: 0;
+    background-color: $white;
+
+    option {
+      padding: $form-select-multiple-padding-y $form-select-padding-x;
+      background-color: $white;
+
+      &:checked {
+        color: $white;
+        background-color: var(--cassiopeia-color-primary) !important;
+      }
+    }
+  }
+
+  &.form-select-success,
+  &.custom-select-success {
+    color: $success;
+    background-color: $success;
+
+    option {
+      color: $form-select-color;
+      background-color: $white;
+    }
+  }
+
+  &.form-select-danger,
+  &.custom-select-danger {
+    color: $danger;
+    background-color: $danger;
+
+    option {
+      color: $form-select-color;
+      background-color: $white;
+    }
+  }
+
+  optgroup,
+  option {
+    color: var(--dark);
+    background-color: $white;
+  }
+}
+
+// Backwards compat with BS4
+.form-group {
+  @extend .mb-3;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_dropdown.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_dropdown.scss
@ -0,0 +1,17 @@
+// Dropdown
+
+.dropdown-menu {
+  padding: .2rem 0;
+  margin-top: .5rem;
+  background-color: $white;
+  border-color: $cassiopeia-border-color;
+}
+
+.dropdown-menu-end {
+
+  &::after {
+    right: .9rem;
+    left: auto;
+  }
+
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_forms.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_forms.scss
@ -0,0 +1,14 @@
+.field-media-wrapper {
+  display: block;
+  width: 100%;
+  max-width: calc(50vw - 5rem);
+
+  .field-media-preview {
+    width: 100%;
+    max-width: none;
+  }
+
+  @include media-breakpoint-down(lg) {
+    min-width: 100%;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_lists.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_lists.scss
@ -0,0 +1,9 @@
+// Lists
+
+.list-group-item {
+  background-color: $list-group-bg;
+}
+
+.list-unstyled .list-unstyled {
+  padding-left: 20px;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_modal.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_modal.scss
@ -0,0 +1,99 @@
+// Modal
+
+.jviewport-height {
+  &10 {
+    height: 10vh;
+  }
+
+  &20 {
+    height: 20vh;
+  }
+
+  &30 {
+    height: 30vh;
+  }
+
+  &40 {
+    height: 40vh;
+  }
+
+  &50 {
+    height: 50vh;
+  }
+
+  &60 {
+    height: 60vh;
+  }
+
+  &70 {
+    height: 70vh;
+  }
+
+  &80 {
+    height: 80vh;
+  }
+
+  &90 {
+    height: 90vh;
+  }
+
+  &100 {
+    height: 100vh;
+  }
+}
+
+[class*=jviewport-height] iframe {
+  height: 100%;
+}
+
+.modal-dialog.jviewport-width {
+  &10 {
+    width: 10vw;
+    max-width: none;
+  }
+
+  &20 {
+    width: 20vw;
+    max-width: none;
+  }
+
+  &30 {
+    width: 30vw;
+    max-width: none;
+  }
+
+  &40 {
+    width: 40vw;
+    max-width: none;
+  }
+
+  &50 {
+    width: 50vw;
+    max-width: none;
+  }
+
+  &60 {
+    width: 60vw;
+    max-width: none;
+  }
+
+  &70 {
+    width: 70vw;
+    max-width: none;
+  }
+
+  &80 {
+    width: 80vw;
+    max-width: none;
+  }
+
+  &90 {
+    width: 90vw;
+    max-width: none;
+  }
+
+  &100 {
+    width: 100vw;
+    max-width: none;
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_nav.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_nav.scss
@ -0,0 +1,78 @@
+// Tabs
+
+.nav.nav-tabs {
+  padding: 0;
+  margin: 0;
+  background-color: $cassiopeia-tabs-header-bg;
+  border: 1px solid $cassiopeia-border-color;
+  border-bottom: 0;
+  border-radius: $border-radius $border-radius 0 0;
+  box-shadow: 0 1px $white inset, 0 2px 3px -3px hsla(0, 0%, 0%, .15), 0 -4px 0 hsla(0, 0%, 0%, .05) inset, $cassiopeia-box-shadow;
+
+  .nav-item {
+    margin-bottom: 0;
+    margin-left: 0;
+
+    &:first-of-type .nav-link {
+
+      &.active {
+        border-radius: $border-radius 0 0;
+        box-shadow: -1px 0 1px -1px hsla(0, 0%, 0%, .06), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+      }
+
+    }
+
+    &:last-of-type .nav-link {
+      box-shadow: -1px 0 0 hsla(0, 0%, 0%, .05), 1px 0 0 hsla(0, 0%, 0%, .05);
+
+      &.active {
+        box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, .08), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+      }
+
+    }
+
+  }
+
+  .nav-link {
+    position: relative;
+    padding: .75em 1em;
+    color: var(--cassiopeia-color-primary);
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: -1px 0 0 hsla(0, 0%, 0%, .05);
+
+    &.active {
+      background-color: $cassiopeia-tabs-active-bg;
+      background-image: linear-gradient(to bottom, hsla(0, 0%, 0%,0), hsla(0, 0%, 0%, .05) 100%);
+      border-right: 0;
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, .08), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+
+      &::after {
+        position: absolute;
+        right: 0;
+        bottom: -1px;
+        left: 0;
+        height: 5px;
+        content: "";
+        background-color: $cassiopeia-tabs-active-highlight;
+        opacity: .8;
+      }
+
+    }
+
+  }
+
+}
+
+.nav-tabs + .tab-content {
+  padding: 15px;
+  background: $white;
+  border: 1px solid;
+  border-color: $cassiopeia-border-color;
+  border-radius: 0 0 $border-radius $border-radius;
+  box-shadow: $cassiopeia-box-shadow;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_pagination.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_pagination.scss
@ -0,0 +1,5 @@
+// Pagination
+
+.pagination {
+  margin: 1rem;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/bootstrap/_table.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/bootstrap/_table.scss
@ -0,0 +1,24 @@
+// Table
+
+.table {
+
+  th {
+    font-weight: 500;
+  }
+
+  thead th {
+    white-space: nowrap;
+    border-bottom-width: 1px;
+  }
+
+  th,
+  td {
+    vertical-align: middle;
+
+    label {
+      margin-bottom: 0;
+    }
+
+  }
+
+}
--- a/media/templates/site/cassiopeia/scss/vendor/choicesjs/choices.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/choicesjs/choices.scss
@ -0,0 +1,167 @@
+@import "../../../../../../vendor/bootstrap/scss/functions";
+@import "../../../../../../templates/site/cassiopeia/scss/tools/variables/variables";
+@import "../../../../../../vendor/bootstrap/scss/variables";
+@import "../../../../../../vendor/bootstrap/scss/mixins";
+
+// choices.js
+@import "../../../../../../vendor/choicesjs/scss/choices";
+
+// Cassiopea Variables, Functions and Mixins
+@import "../../tools/tools";
+
+.choices {
+  border: $form-select-border-width solid $form-select-border-color;
+  @include border-radius($form-select-border-radius, 0);
+  @include box-shadow($form-select-box-shadow);
+
+  &.is-focused {
+    border-color: $form-select-focus-border-color;
+
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+  }
+}
+
+.choices__inner {
+  padding: .4rem 1rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0;
+}
+
+.choices__input {
+  padding: 0;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: transparent;
+
+  &::placeholder {
+    color: $gray-700;
+    opacity: 1;
+  }
+}
+
+.choices__list--dropdown {
+  z-index: $zindex-popover;
+}
+
+.choices__list--multiple .choices__item {
+  position: relative;
+  margin: 2px;
+  background-color: var(--cassiopeia-color-primary);
+  margin-inline-end: 2px;
+  border: 0;
+  @include border-radius($border-radius, 0);
+
+  &.is-highlighted {
+    background-color: var(--cassiopeia-color-primary);
+    opacity: .9;
+  }
+}
+
+.choices .choices__list--dropdown {
+  .choices__item {
+    padding-inline-end: 10px;
+  }
+
+  .choices__item--selectable::after {
+    display: none;
+  }
+}
+
+.choices__button_joomla {
+  position: relative;
+  padding: 0 10px;
+  color: inherit;
+  text-indent: -9999px;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  opacity: .5;
+  appearance: none;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    text-align: center;
+    text-indent: 0;
+    content: "\00d7";
+  }
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.choices[data-type*="select-one"],
+.choices[data-type*="select-multiple"] {
+  .choices__inner {
+    padding-inline-end: 3rem;
+    cursor: pointer;
+    background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
+    background-color: $form-select-bg;
+
+    [dir="rtl"] & {
+      background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
+      background-color: $form-select-bg;
+    }
+  }
+}
+
+.choices[data-type*="select-one"] {
+  .choices__item {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .choices__button_joomla {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    margin-block-start: -10px;
+    margin-inline-end: 50px;
+    border-radius: 10em;
+    opacity: .5;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px #00bcd4;
+    }
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.choices[data-type*="select-multiple"],
+.choices[data-type*="text"] {
+  .choices__input {
+    padding: .2rem 0;
+  }
+}
+
+.choices__heading {
+  font-size: 1.2rem;
+}
--- a/media/templates/site/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
@ -0,0 +1,158 @@
+@import "../../tools/tools";
+@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
+
+// The following is a restyle for the system alerts
+#system-message-container {
+  &:empty {
+    display: none;
+    margin-top: 0;
+  }
+}
+
+#system-message-container joomla-alert {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 16rem;
+  padding: 0;
+  margin-bottom: 0;
+  color: var(--gray-dark);
+  background-color: $white;
+  border: 1px solid var(--alert-accent-color, transparent);
+  border-radius: .25rem;
+  transition: opacity .15s linear;
+
+  + * {
+    margin-top: 1rem;
+  }
+
+  .alert-heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    padding: .8rem;
+    color: var(--alert-heading-text);
+    background: var(--alert-accent-color, transparent);
+
+    .message::before,
+    .success::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
+      background-size: 100%;
+    }
+
+    .notice::before,
+    .info::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
+      background-size: 100%;
+    }
+
+    .warning::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
+      background-size: 100%;
+    }
+
+    .error::before,
+    .danger::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
+      background-size: 100%;
+    }
+  }
+
+  .alert-wrapper {
+    width: 100%;
+  }
+
+  .alert-link {
+    color: var(--success, inherit);
+  }
+
+  &[type="success"],
+  &[type="message"] {
+    --alert-accent-color: var(--success);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--success);
+    background-color: $white;
+  }
+
+  &[type="info"],
+  &[type="notice"] {
+    --alert-accent-color: var(--info);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--info);
+    background-color: $white;
+  }
+
+  &[type="warning"] {
+    --alert-accent-color: var(--warning);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--warning);
+    background-color: $white;
+  }
+
+  &[type="error"],
+  &[type="danger"] {
+    --alert-accent-color: var(--danger);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--danger);
+    background-color: $white;
+  }
+
+  .joomla-alert--close,
+  .joomla-alert-button--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .2rem .8rem;
+    font-size: 2rem;
+    color: var(--alert-close-button);
+    background: none;
+    border: 0;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: .75;
+    }
+
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      padding: .2rem .6rem;
+    }
+  }
+
+  div {
+    font-size: 1rem;
+    .alert-message {
+      padding: .3rem 2rem .3rem .3rem;
+      margin: .5rem;
+
+      [dir=rtl] & {
+        padding: .3rem .3rem .3rem 2rem;
+      }
+    }
+
+    .alert-message:not(:first-of-type) {
+      border-top: 1px solid var(--alert-accent-color);
+    }
+  }
+}
--- a/media/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss
+++ b/media/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss
@ -0,0 +1,218 @@
+@if $metismenu==true {
+  .metismenu {
+    &.menu-horizontal {
+      flex: 1 0 100%;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      @include media-breakpoint-up(lg) {
+        display: flex;
+        flex: 1 1 0%;
+        flex-direction: row;
+      }
+
+      > li {
+        position: relative;
+      }
+
+      .level-1 {
+        > ul {
+          min-width: 12rem;
+        }
+      }
+    }
+
+    &.mod-menu {
+      margin: 0;
+
+      .metismenu-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
+        font-size: 1.1rem;
+        line-height: 1.5;
+
+        &.parent {
+          position: relative;
+        }
+
+        > ul {
+          position: absolute;
+          top: 100%;
+          z-index: 1001;
+          display: block;
+          padding: 0;
+          list-style: none;
+          box-shadow: 0 0 .5em hsla(0, 0%, 0%, .1);
+        }
+
+        > span,
+        > a,
+        > button {
+          overflow: hidden;
+          text-decoration: none;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        > a:focus,
+        > button:focus {
+          outline: 1px dotted $gray-400;
+          outline-offset: 2px;
+        }
+
+        &.active > a,
+        &.active > button,
+        > a:hover,
+        > button:hover {
+          text-decoration: underline;
+        }
+
+        &::after {
+          content: none;
+        }
+
+        &:not(.level-1) > ul,
+        &:not(.level-2) > ul {
+          margin-inline-end: -1em;
+        }
+
+        &.divider:not(.parent) {
+          width: 1px;
+          padding: 0;
+          margin: .25em;
+          overflow: hidden;
+          border-right: 1px solid $gray-400;
+
+          @include media-breakpoint-down(lg) {
+            width: auto;
+            height: 1px;
+            border-bottom: 1px solid $gray-400;
+          }
+
+        }
+      }
+
+      .mm-collapsing {
+        height: 0;
+        overflow: hidden;
+        transition-timing-function: ease;
+        transition-duration: .35s;
+        transition-property: color, background-color, height, visibility;
+      }
+
+      .mm-collapse {
+        position: absolute;
+        background-color: hsl(0, 0%, 100%);
+        box-shadow: $cassiopeia-box-shadow;
+
+        &:not(.mm-show) {
+          display: none;
+        }
+
+        > li {
+          > a {
+            display: inline-flex;
+          }
+
+          &.divider:not(.parent) {
+            width: auto;
+            height: 1px;
+            border-bottom: 1px solid $gray-400;
+          }
+        }
+
+        > li.parent {
+          .mm-toggler {
+            display: inline-flex;
+          }
+
+          > ul {
+            position: relative;
+            top: 0;
+            flex-basis: calc(100% + #{$cassiopeia-grid-gutter});
+            margin-top: $cassiopeia-grid-gutter * .5;
+            margin-bottom: $cassiopeia-grid-gutter * -.5;
+            background-color: hsla(0, 0%, 0%, .03);
+            box-shadow: none;
+          }
+        }
+      }
+
+      .mm-toggler {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0;
+        color: currentColor;
+        user-select: none;
+        background: none;
+        border: none;
+        box-shadow: none;
+
+        &:after {
+          width: 0;
+          height: 0;
+          margin-inline-start: .5em;
+          content: "";
+          border-top: .5em solid currentColor;
+          border-right: .5em solid transparent;
+          border-left: .5em solid transparent;
+          transition: all .3s ease-out;
+
+          @at-root .mm-active > & {
+            transform: rotateX(-180deg);
+          }
+        }
+
+        &[aria-expanded="true"]:after {
+          transform: rotateX(-180deg);
+        }
+      }
+
+      .parent {
+        > ul {
+          color: $gray-900;
+        }
+      }
+    }
+  }
+
+  .sidebar-right,
+  .sidebar-left {
+    .metismenu {
+      .mm-collapse {
+        position: relative;
+        background-color: hsla(0, 0%, 0%, .03);
+      }
+
+      li.parent {
+        > ul {
+          position: relative;
+          top: 0;
+          box-shadow: none;
+
+          @include media-breakpoint-down(xl) {
+            width: 100%;
+          }
+        }
+      }
+
+      .metismenu-item {
+        > span,
+        > a {
+          white-space: inherit;
+        }
+
+        &.divider:not(.parent) {
+          width: auto;
+          height: 1px;
+          border-bottom: 1px solid $gray-400;
+        }
+      }
+    }
+  }
+}